小程序图片裁剪

两种方式:we-cropper 和 image-cropper
we-cropper在小程序android选择图片后跳转到裁剪页面图片不能显示,目前没找到解决方法,项目中换了image-cropper做。
image-cropper如果需要动态改变裁剪框大小的时候,初始化比较慢。其他暂时没发现问题。
个人觉得image-cropper更好用
we-cropper 参考文档https://we-plugin.github.io/we-cropper/#/
在templates添加we-cropper文件。

小程序图片裁剪
文章图片
image.png
在page里面新建文件夹,按照文档给出的方式写就好了

mport WeCropper from '../../templates/we-cropper/we-cropper.js' const myApp = getApp()const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 50Page({ data: { cropperOpt: { id: 'cropper', //用于收拾操作的canvas组件标识符 targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符 pixelRatio: device.pixelRatio, // 传入设备像素比 width, height, scale: 2.5, // 最大缩放倍数 zoom: 8, // 缩放系数 cut: { // 裁剪框x轴起点裁剪框y轴期起点 x: 0, y: (height - 300) / 2, width: width, // 裁剪框宽度 height: 300 // 裁剪框高度 }, boundStyle: { color: 'rgba(0,0,0,0.8)', lineWidth: 1 }, } }, onLoad(option) { console.log(option); const widthHeightScale = option.width / option.height; const { cropperOpt } = this.data; const filePath = decodeURIComponent(option.filePath); //图片临时地址cropperOpt.cut = { x: (width - width * option.width / 750) / 2, y: (height - width * option.height / 750) / 2, width: width * option.width / 750, height: width * option.height / 750, }; this.setData({ cropperOpt }) this.cropper = new WeCropper(cropperOpt) .on('ready', (ctx) => { console.log(`wecropper is ready for work!`) }) .on('beforeImageLoad', (ctx) => { wx.showToast({ title: '加载中', icon: 'loading', mask: true, duration: 20000 }) }) .on('imageLoad', (ctx) => { wx.hideToast() }) //获取裁剪图片资源后,给data添加src属性及其值 this.cropper.pushOrign(filePath); }, touchStart(e) { this.cropper.touchStart(e) }, touchMove(e) { this.cropper.touchMove(e) }, touchEnd(e) { this.cropper.touchEnd(e) }, getCropperImage() { let _this = this; this.cropper.getCropperImage() .then((src) => { console.log(src); // wx.previewImage({ //current: '', // 当前显示图片的http链接 //urls: [src] // 需要预览的图片http链接列表 // }); wx.showLoading({ title: '上传中...', mask: true, }); wx.uploadFile({ url: myApp.globalData.serverUrl + 'extEntryImageUpload.ext', //接口地址 filePath: src, header: myApp.globalData.requestHeader, name: 'imageFile', success(res) {}, fail(err) { //console.log(err); }, complete: function () { wx.hideLoading(); } })}) .catch(() => { console.log('获取图片地址失败,请稍后重试') }) },})