小程序裁剪

<import src="../we/we-cropper.wxml"/>
<view class="cropper-wrapper">
<template is="we-cropper" data="{{...cropperOpt}}"/>
</view>
<view class="cropper-buttons">
<button class="upload"
bindtap="uploadTap">
重新上传
</button>
<button
class="getCropperImage"
bindtap="mygetCropperImage">
确定
</button>
</view>

/* pages/cut/index.wxss */
.cropper-wrapper{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
justify-content: center;
height: 100%;
background-color: #e5e5e5;
}
.cropper-buttons{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0 20rpx;
box-sizing: border-box;
line-height: 150px;
}
.cropper-buttons .upload, .cropper-buttons .getCropperImage{
text-align: center;
z-index: 999999;
margin: 10rpx;
background-color: #36ccf9;
}

const Util = require(‘../../../../utils/util.js‘);
const app = getApp()
const {
regeneratorRuntime
} = global
import WeCropper from ‘../we/we-cropper.js‘;
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight -150
Page({
data: {
cropperOpt: {
id: ‘cropper‘, // 用于手势操作的canvas组件标识符
targetId: ‘targetCropper‘, // 用于用于生成截图的canvas组件标识符
pixelRatio: device.pixelRatio, // 传入设备像素比
width, // 画布宽度
height, // 画布高度
src: ‘‘,
scale: 2.5, // 最大缩放倍数
zoom: 8, // 缩放系数
            cut: {
x: (width - 320) / 2, // 裁剪框x轴起点
y: (width - 320) / 2, // 裁剪框y轴起点
width: 320, // 裁剪框宽度
height: 320 // tore/"裁剪框高度
            }
}
},
// 页面onLoad函数中实例化WeCropper
    onLoad: function(options) {
const {
cropperOpt
} = this.data;
cropperOpt.src = options.src;
if (cropperOpt.src) {
this.cropper = new WeCropper(cropperOpt)
.on(‘ready‘, (ctx) => {
console.log(`wecropper is ready for work!`)
})
.on(‘beforeImageLoad‘, (ctx) => {
wx.showToast({
title: ‘上传中‘,
icon: ‘loading‘,
duration: 3000
})
})
.on(‘imageLoad‘, (ctx) => {
wx.hideToast()
})
}
},
// 插件通过touchStart、touchMove、touchEnd方法来接收事件对象。
    touchStart(e) {
this.cropper.touchStart(e)
},
touchMove(e) {
this.cropper.touchMove(e)
},
touchEnd(e) {
this.cropper.touchEnd(e)
},
// 自定义裁剪页面的布局中，可以重新选择图片
    uploadTap() {
const self = this
wx.chooseImage({
count: 1, // 默认9
sizeType: [‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
            success(res) {
const src = res.tempFilePaths[0]
self.cropper.pushOrign(src)
}
})
},
// 生成图片
    mygetCropperImage(){
var that = this;
this.cropper.getCropperImage((tempFilePath) => {
// tempFilePath 为裁剪后的图片临时路径
if (tempFilePath) {
//TODO 处理逻辑
}else{
console.log(‘获取图片地址失败，请稍后重试‘)
}
})
}
})

{
"navigationBarTitleText": "裁剪",
"usingComponents": {}
}