welCropper
1.0.4
canvas viel größer ist als das Originalbild. Manchmal stürzt es ab am Anfang, und manchmal stürzt der Aufruf von wx.canvasToTempFilePath ab)callmesoul/wepy-corpper
project aus. .
├── app.js
├── app.json
├── app.wxss
├── components
│ ├── room
│ │ ├── room.js
│ │ ├── room.json
│ │ ├── room.wxml
│ │ └── room.wxss
│ └── welCropper
│ ├── package.json
│ ├── welCropper.js
│ ├── welCropper.json
│ ├── welCropper.wxml
│ ├── welCropper.wxss
│ └── welCropperUtil.js
├── images
│ └── my.jpeg
├── pages
│ ├── componentTest
│ │ ├── componentTest.js
│ │ ├── componentTest.json
│ │ ├── componentTest.wxml
│ │ └── componentTest.wxss
│ ├── index
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── test
│ ├── test.js
│ ├── test.json
│ ├── test.wxml
│ └── test.wxss
├── project.config.json
└── welCropper
├── package.json
├── welCropper.js
├── welCropper.wxml
├── welCropper.wxss
└── welCropperUtil.js
Durch mode von showCropper
movable-view besteht darin, dass Sie Drag & Drop nicht selbst implementieren und direkt die offizielle Komponente verwenden müssen. Da die Daten und Ereignisse cropper direkt an Page gebunden sind, sollten bei der Benennung der Daten und Ereignisse Namen (wir werden später Möglichkeiten finden, dies zu vermeiden) und die zugehörigen Erklärungen vermieden werden:
Name in Daten:
Funktionsname:
Nur showCropper und hideCropper werden extern verwendet
/**
src:输入图片地址
callback(res):点击“完成”按钮后毁掉函数，毁掉函数中会有截图地址
*/
showCropper({
src, //字符串, 图片path
mode, //字符串, "rectangle" 或 "quadrangle". quadrangle只会返回4个点的坐标. rectangle返回截图path
sizeType, //数组, ['original', 'compressed'], 默认original
callback //回调函数, callback(res): mode=rectangle, res=path; mode=quadrangle, res=[[x,y], [x,y], [x,y], [x,y]]
})
Kopieren Sie welCropper in Ihr eigenes Projekt (nehmen Sie /pages/index/index als Beispiel)
npm installieren $ npm install wel-cropper-template //for template
$ npm install wel-cropper-component //for component
Bei einer Installation über
npmmüssen Sie den entsprechenden Importpfad ändern.
Beispiel: template :
<import src="/node_modules/wel-cropper-template/welCropper" />
In der component json :
{
...
"usingComponents": {
"wel-cropper": "/node_modules/wel-cropper-component/welCropper"
},
...
}
wxml -Importe und -Aufrufe: <!-- 引入组件 -->
<import src="/welCropper/welCropper" />
<!-- 调用组件 -->
<template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems, cropperChangableData:cropperChangableData}}"></template>
<!-- 用于选择图片，传入cropper中 -->
<button bindtap='selectTap'>select image</button>
wxss Einführung: @import "/welCropper/welCropper.wxss";
js Einführung und Verwendung: // 获取显示区域长宽
const device = wx.getSystemInfoSync()
const W = device.windowWidth
const H = device.windowHeight - 50
let cropper = require('../../welCropper/welCropper.js');
console.log(device)
Page({
data: {
},
onLoad: function () {
var that = this
// 初始化组件数据和绑定事件
cropper.init.apply(that, [W, H]);
},
selectTap() {
var that = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
const tempFilePath = res.tempFilePaths[0]
console.log(tempFilePath)
// 将选取图片传入cropper，并显示cropper
// mode=rectangle 返回图片path
// mode=quadrangle 返回4个点的坐标，并不返回图片。这个模式需要配合后台使用，用于perspective correction
// maxLength=1000 默认2000，允许最大长宽，避免分辨率过大导致崩溃
let modes = ["rectangle", "quadrangle"]
let mode = modes[0] //rectangle, quadrangle
that.showCropper({
src: tempFilePath,
mode: mode,
sizeType: ['original', 'compressed'], //'original'(default) | 'compressed'
maxLength: 1000,
callback: (res) => {
if (mode == 'rectangle') {
console.log("crop callback:" + res)
wx.previewImage({
current: '',
urls: [res]
})
}
else {
wx.showModal({
title: '',
content: JSON.stringify(res),
})
console.log(res)
}
// that.hideCropper() //隐藏，我在项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
}
})
}
})
}
})
