we-cropper 实战4 步搞定小程序图片裁剪【免费下载链接】we-cropper微信小程序图片裁剪工具项目地址: https://gitcode.com/gh_mirrors/we/we-cropperwe-cropper 是一款基于 canvas 的微信小程序图片裁剪组件自带手势缩放与拖动把模板和 JS 放进页面5 分钟即可跑通。两个高频场景用户传头像时要从原图里抠出一块正方形商城导入商品图时要统一裁成固定比例。这些用 canvas 手写又繁琐we-cropper 用一个模板标签就接住了。we-cropper 的安装与引入如果项目开了 npm直接装包npm install we-cropper --save跑完预期看到node_modules 下出现 we-cropper按小程序 npm 构建流程引用其产物即可。没开 npm 就克隆仓库把example/we-cropper目录下的we-cropper.js和we-cropper.wxml拷进工程git clone https://gitcode.com/gh_mirrors/we/we-cropper跑完预期看到仓库落在当前目录把这两个文件复制到你小程序对应层级路径与后文 import 保持一致。核心实操声明裁剪容器在页面 WXML 中引入模板。它内部有两个 canvas一个显示图片并接收手势另一个移出屏幕外专门负责最后导出裁剪结果。import src../we-cropper/we-cropper.wxml/ view classcropper-wrapper template iswe-cropper data{{...cropperOpt}}/ view classcropper-buttons view bindtapuploadTap上传图片/view view bindtapgetCropperImage生成图片/view /view /view跑完预期看到页面出现一块深色裁剪区和两个按钮此时还没有图。传入裁剪参数data 里的cropperOpt就是构造器配置最小 Demo 只需这几项参数作用示例值id手势画布标识必填croppertargetId截图画布标识必填targetCropperpixelRatio设备像素比决定导出清晰度device.pixelRatiowidth / height裁剪区宽高须与 canvas 一致windowWidthscale最大缩放倍数2.5zoom缩放灵敏度越大越敏感8cut内部裁剪框的位置与大小{ x, y, width, height }不传cut时整块画布都算裁剪区域完整配置见 example/ 目录。实例化裁剪器并绑定手势在onLoad里用cropperOpt实例化三个触摸方法必须逐一透传缺一个手势就失灵。import WeCropper from ../we-cropper/we-cropper.js const device wx.getSystemInfoSync() Page({ data: { cropperOpt: { id: cropper, targetId: targetCropper, pixelRatio: device.pixelRatio, // 缺了它导出图会糊 width: device.windowWidth, // 必须与 WXML 中 canvas 尺寸一致 height: device.windowWidth, scale: 2.5, zoom: 8 } }, onLoad() { this.cropper new WeCropper(this.data.cropperOpt) .on(beforeImageLoad, () { // 图片加载要时间先给个 loading 反馈 wx.showToast({ title: 加载中, icon: loading, duration: 20000 }) }) .on(imageLoad, () wx.hideToast()) }, touchStart(e) { this.cropper.touchStart(e) }, touchMove(e) { this.cropper.touchMove(e) }, touchEnd(e) { this.cropper.touchEnd(e) } })跑完预期看到控制台打印 ready 相关日志页面裁剪区等待载入图片。载入图片并取裁剪结果pushOrign把选中的图放进裁剪区getCropperImage拿到裁剪后的临时路径可直接传服务器或先预览确认。uploadTap() { const self this wx.chooseImage({ count: 1, sourceType: [album, camera], success(res) { self.cropper.pushOrign(res.tempFilePaths[0]) } }) }, getCropperImage() { this.cropper.getCropperImage((path, err) { if (err) { wx.showModal({ title: 提示, content: err.message }) } else { // 先预览确认再走上传 wx.previewImage({ current: , urls: [path] }) } }) }跑完预期看到选图后裁剪区内出现图片可用单指拖动、双指缩放点「生成图片」弹出全屏预览的裁剪结果。进阶可选项基础功能已够用可跳过只裁画布中间一小块头像场景传cut参数参考 example/cutInside 目录给结果加水印在on(beforeDraw)回调里用 ctx 先画文字再生图参考 example/watermark 目录基础库 2.9.0 可用 canvas2d 模式通过createSelectorQuery取到 canvas 节点后把canvas和ctx一并传入构造器参考 example/canvas2d 目录we-cropper 常见报错速查症状导出的图发虚、模糊。原因没传pixelRatio或 canvas 宽高与cropperOpt的 width/height 不一致。解法从wx.getSystemInfoSync()取 pixelRatio 传入并核对两处尺寸完全相等。症状图片载入后拖动、缩放无反应。原因canvas 未绑定touchstart/touchmove/touchend或 JS 里没透传到实例。解法对照 WXML 模板检查三个事件绑定确认touchStart等方法成对存在。症状getCropperImage回调返回错误。原因图片还没加载完就触发了导出。解法把「生成图片」按钮的可用状态放到imageLoad回调之后。症状canvas2d 写法不生效。原因基础库版本低于 2.9.0。解法保留正文使用的 canvas-id 经典模式不切 canvas2d。收尾we-cropper 的最小裁剪链路就是四步声明容器、传参、绑手势、取图。参数细节看仓库 docs/api.md更多场景头像、水印、网络图直接翻 example/ 目录即可照搬。【免费下载链接】we-cropper微信小程序图片裁剪工具项目地址: https://gitcode.com/gh_mirrors/we/we-cropper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 新乡本地动态 ← 返回资讯列表
