使用上一篇文件的cropper插件引入后
wxml
<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>
wxss
/* 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; }
js
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 onl oad: 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('获取图片地址失败,请稍后重试') } }) } })
json
{ "navigationBarTitleText": "裁剪", "usingComponents": {} }