we-cropper实战5分钟速通微信小程序图片裁剪【免费下载链接】we-cropper微信小程序图片裁剪工具项目地址: https://gitcode.com/gh_mirrors/we/we-cropper做头像上传、商品图编辑时自己写一套 canvas 裁剪交互并不轻松。we-cropper 基于 canvas 为微信小程序提供图片裁剪能力引一个模板、实例化一次拖动、缩放、导出就都有了。下面按初始化、手势绑定、结果导出三条线走一遍。能帮你做什么双画布手势裁剪内置拖动、双指缩放触摸数学不用自己写裁剪框自由配置位置、尺寸、边框颜色、遮罩都能按需调一行导出结果临时路径或 base64拿到即可上传新旧渲染兼容老 canvas 与 canvas2d 两种模式都支持环境准备与引入小程序工程用 npm 管理依赖时直接安装npm install we-cropper --save不用 npm 的话git clone https://gitcode.com/gh_mirrors/we/we-cropper拉到本地再让工程引用仓库中的文件即可。页面 WXML 里引入裁剪模板data 中传入配置对象import src../we-cropper/we-cropper.wxml/ view classcropper-wrapper template iswe-cropper data{{...cropperOpt}}/ /view模板内部有两个 canvas一个负责手势展示另一个被移到屏幕外专门截图生成裁剪结果。cropperOpt就是稍后要传给构造器的那份配置。核心用法走读初始化配置画布尺寸与裁剪框构造器接收一个配置对象核心是画布尺寸、缩放参数和裁剪框位置。把它放进页面 dataWXML 和 JS 共用一份import WeCropper from ../we-cropper/we-cropper.js const device wx.getSystemInfoSync() const width device.windowWidth // 页面 data 中 cropperOpt: { id: cropper, // 手势画布标识 targetId: targetCropper, // 截图画布标识 pixelRatio: device.pixelRatio, width, height: width, // 正方形画布 scale: 2.5, // 最大缩放倍数 zoom: 8, // 缩放灵敏度 cut: { x: (width - 200) / 2, // 裁剪框水平居中 y: (width - 200) / 2, width: 200, height: 200 } }onLoad 中实例化顺手挂上生命周期钩子方便控制加载提示onLoad() { this.cropper new WeCropper(this.data.cropperOpt) .on(beforeImageLoad, () wx.showToast({ title: 加载中, icon: loading })) .on(imageLoad, () wx.hideToast()) } 画布宽高必须和构造器的width、height完全一致否则裁剪框会错位、出图发糊。手势绑定转发三个触摸回调图片的平移和双指缩放全靠触摸事件。模板里的 canvas 已经绑好bindtouchstart等事件页面侧只需把三个回调转发给实例touchStart(e) { this.cropper.touchStart(e) }, touchMove(e) { this.cropper.touchMove(e) }, touchEnd(e) { this.cropper.touchEnd(e) }少转发一个对应手势就不生效排查时先确认这条链路。结果导出载入图片与拿裁剪图载入图片有两种方式构造时给src直接载入适合预设图或实例化后调用pushOrign适合用户选图wx.chooseImage({ count: 1, success: (res) { // 临时路径、本地存储路径、网络路径均可 this.cropper.pushOrign(res.tempFilePaths[0]) } })导出是一次调用回调第一个参数即裁剪图的临时路径this.cropper.getCropperImage((path, err) { if (err) return wx.previewImage({ urls: [path] }) // 或直接上传服务端 })需要 base64 给前端组件展示时改用getCropperBase64即可基础库 1.9.0 起支持。场景实战头像上传固定正方形输出输入相册或相机选取的图片。配置cut的 width 与 height 设为相等x、y 按容器尺寸居中即最典型的头像参数。输出固定尺寸的方形头像临时文件直接上传。细节上裁剪框比例决定出图比例头像最终显示为圆形时裁剪框可略小于展示直径给边缘裁切留余量。商品图 / Banner按目标比例裁切输入本地商品图。配置裁剪框按目标比例设置如 3:2用boundStyle调整边框颜色与遮罩贴合页面主题。输出规格统一的 banner 图。工程若启用新 canvas 渲染则切到 canvas2d 模式先取到节点再构造要求基础库 2.9.0 以上this.createSelectorQuery() .select(#${cropperOpt.id}) .fields({ node: true, size: true }) .exec((res) { const canvas res[0].node const dpr wx.getSystemInfoSync().pixelRatio canvas.width res[0].width * dpr canvas.height res[0].height * dpr const ctx canvas.getContext(2d) ctx.scale(dpr, dpr) this.cropper new WeCropper({ ...cropperOpt, canvas, ctx }) })canvas 物理像素要按 dpr 放大这一步漏了出图就会模糊。避坑清单画布尺寸不一致— 现象裁剪框错位、出图模糊原因WXML 中 canvas 宽高与构造器width/height对不上解法两处用同一组变量派生。触摸事件漏绑— 现象图片只能看不能动原因三个回调没有全部转发给实例解法检查 touchStart / touchMove / touchEnd 链路是否完整。canvas2d 导出空白— 现象点导出没图原因构造时没传canvas和ctx或没按 pixelRatio 缩放画布解法取节点、定尺寸、scale dpr、再传入四步一步不少。低版本基础库不兼容— 现象base64 导出报错原因getCropperBase64需要基础库 1.9.0 以上解法声明最低基础库版本或退回临时文件路径导出。延伸资源API 参考构造器参数、全部方法docs/api.md示例工程普通裁剪、canvas2d、头像上传、水印、网络图example/变更日志docs/changelog.md遇到兼容性疑难可以翻翻项目的 Issues 和历史讨论里面沉淀了不少真机案例。从手势到出图we-cropper 用一份配置对象就把裁剪链路兜住了业务侧的精力可以花在上传和展示上。顺手点个 Star发现 bug 或有想法时欢迎提 Issue 或提交 PR。【免费下载链接】we-cropper微信小程序图片裁剪工具项目地址: https://gitcode.com/gh_mirrors/we/we-cropper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考