这里使用的是开源是的插件，做的很不错 https://github.com/we-plugin/we-cropper.git
git下来之后，如果急着使用效果。可以直接到example目录下 把we-cropper文件夹直接放在自己的小程序项目中，现在我使用的是照片裁剪上传的功能。
所以需要两个页面来共同完成。
A页面 展示修改裁剪后照片的页面 ，B 页面的原来实现裁剪功能的页面。
A页面的代码 ：通过事件出发获取相册的api后，拿到图片地址，携带地址跳转到B页面
wx.chooseImage({ count: 1,//选择数量 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function(res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 const src = res.tempFilePaths[0] wx.redirectTo({ url: `../B/B?src=${src}`, }) },})——————————————————————————————————————B 页面的wxml ：import src="../../we-cropper/we-cropper.wxml"/view class="cropper-wrapper"template is="we-cropper" data="{{...cropperOpt}}"/view class="cropper-buttons"viewclass="upload"bindtap="uploadTap"重新选择/viewviewclass="getCropperImage"bindtap="getCropperImage"确定/view/view/view————————————————————————————————B页面的css：@import "../../style/common.wxss";page{height: 100%}.cropper{position: absolute;top: 0;left: 0;}.cropper-buttons{ "rgba(0, 0, 0, 0.95); color: #04b00f;}————————————————————————————————————B页面的js 关键的页面 import WeCropper from '../../we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync()const width = device.windowWidthconst height = device.windowHeight - 50
Page({ data: { cropperOpt: { id: 'cropper', width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 300, height: 300 } } }, touchStart(e) { this.wecropper.touchStart(e) }, touchMove(e) { this.wecropper.touchMove(e) }, touchEnd(e) { this.wecropper.touchEnd(e) },//这个是保存上传裁剪后的图片的方法 getCropperImage() { var that = this this.wecropper.getCropperImage((avatar) = { if (avatar) { uploadImage(avatar, function (res) { }) function uploadImage(filePath, cb) { //个人封装的简单的上传单张图片上传的方法 wx.uploadFile({ url: “xxx/xx/xx”, filePath: filePath, name: 'file', header: { "Content-Type": "multipart/form-data" }, formData: { token: getApp().globalData.userData.token, userName: "", portrait: filePath }, success: function (res) { // 获取到裁剪后的图片 wx.switchTab({ url: `../A/A?avatar=${avatar}` 如果需要这图片地址就传过去 ，因为我上传后跳转页面后会自己获取服务器的是地址了。这里仅提供思路参考。 }) console.log('上传图片成功') console.log(res); wx.showToast({ title: '上传成功', }) cb(res); }, fail: function (res) { console.log('上传图片失败!') console.log(res) wx.showToast({ title: '上传失败', }) }, }) } } else { console.log('获取图片失败，请稍后重试') } }) }, uploadTap() { const self = this
wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success(res) { const src = res.tempFilePaths[0] // 获取裁剪图片资源后，给data添加src属性及其值
self.wecropper.pushOrign(src) } }) }, onLoad(option) { const { cropperOpt } = this.data
if (option.src) { cropperOpt.src = option.src new WeCropper(cropperOpt) .on('ready', (ctx) = { console.log(`wecropper is ready for work!`) }) .on('beforeImageLoad', (ctx) = { console.log(`before picture loaded, i can do something`) console.log(`current canvas context:`, ctx) wx.showToast({ title: '上传中', icon: 'loading', duration: 20000 }) }) .on('imageLoad', (ctx) = { console.log(`picture loaded`) console.log(`current canvas context:`, ctx) wx.hideToast() }) .on('beforeDraw', (ctx, instance) = { console.log(`before canvas draw,i can do something`) console.log(`current canvas context:`, ctx) }) .updateCanvas() } }})——————————————————————————————————————————这里只是写了的上传头像裁剪的功能，其他的还有常规的的，裁剪网络图，图片添加水印，局部裁剪的功能。有兴趣可以在example目录夹下有对应的源码
