3分钟保姆级微信小程序图片裁剪we-cropper完整指南【免费下载链接】we-cropper微信小程序图片裁剪工具项目地址: https://gitcode.com/gh_mirrors/we/we-cropper小程序里要让用户裁个头像、抠张商品图你打算自己撸画布逻辑还是找个轮子we-cropper 是一个轻量的微信小程序图片裁剪组件引入一次、实例化一次就得到一个带平移和双指缩放手势的裁剪框。这篇 we-cropper 教程带你 3 分钟跑通一个可用的裁剪页。项目速览作为一个 canvas 图片裁剪组件它的核心逻辑非常克制几件事一次说清项目说明包体积压缩后 JS 核心约 12KB全量含画布模板不足 45KB不占包裁剪比例cut 的 width/height 任意配置1:1、16:9、2:3 都行手势能力单指平移、双指捏合缩放内置实现不用自己算手势数学基础库版本1.9.0canvas2d 模式新版画布渲染方式直接拿 2D 接口绘制不用再包 wx.createCanvasContext要求 2.9.0开源协议MIT安装一句话带过npm install we-cropper --save或者把仓库里 example 下的 we-cropper 目录拷进工程。3 步跑通第一个裁剪框we-cropper 教程实战① 引入组件。wxml 里两行模板就位!-- 引入 we-cropper 裁剪模板 -- import src../we-cropper/we-cropper.wxml/ template iswe-cropper data{{...cropperOpt}}/js 里引入并实例化import WeCropper from ../we-cropper/we-cropper.js // 引入裁剪组件 // cropperOpt 是 data 里的配置对象onLoad 中实例化 this.cropper new WeCropper(cropperOpt)模板一放裁剪器就有了剩下的事就是喂参数。② 初始化参数抓住这五个就够参数作用易错点width / height画布宽高单位 px要和画布真实尺寸一致否则裁剪框错位cut裁剪框位置与大小{x, y, width, height}出图比例由 cut 的宽高能决定不跟框的位置走scale最大缩放倍数默认 2.5开太大图会糊太小又看不细节zoom捏合缩放响应速度1~10默认 5它是速度不是倍数pixelRatio设备像素比即逻辑像素与物理像素的换算系数不传或传错出图必糊另外画布有两个 id 要分清id 是手势操作那块画布targetId 是导出图片那块两个都必填。③ 选图与出图。参数喂完调用就两个// 选一张图载入裁剪器 wx.chooseImage({ count: 1, success: (res) this.cropper.pushOrign(res.tempFilePaths[0]) })// 点生成拿到裁剪后的图 this.cropper.getCropperImage((path, err) { if (!err) wx.previewImage({ current: , urls: [path] }) })最后补一块拼图把页面的 touchStart、touchMove、touchEnd用户手指抬起时触发的事件绑到实例同名方法上手势才真正生效。⚡4 个最容易踩坑的参数cut决定裁剪框的位置和大小 →坑不少人以为出图比例跟着屏幕上那个框走其实严格由 cut.width/height 决定。想要 3:4 竖版却导出 1:1十有八九是 cut 没改对。scale限制图片最多能放大几倍 →坑头像场景默认 2.5 够用裁大图时得调高但调越高像素感越明显得自己掂量。zoom双指捏合的响应速度 →坑名字听着像缩放倍数其实是灵敏度。调太高手一抖图片直接飞出去。pixelRatio设备像素比1 个逻辑像素对应几个物理像素 →坑图省事硬编码成 1是出图发糊的经典制造机老老实实取wx.getSystemInfoSync().pixelRatio。两个真实场景怎么落地小程序头像裁剪场景 A用户头像上传。我的习惯是方框 比例锁定cut 设成正方形width 和 height 相等x/y 算到居中用户在方框里平移缩放出图再靠前端 border-radius 显示成圆形后端如果严格要求圆形文件就在服务端对出图做一次居中裁圆。关键就一次调用this.cropper.getCropperImage((path) wx.uploadFile({ filePath: path }))头像这条链路就齐了。场景 B商品图多比例导出。一张商品图经常要出两张横版 banner 一张、竖版详情一张。we-cropper 一次只按当前 cut 出一张图所以别整花的直接实例化两次准备两组画布id/targetId 各不同cut 分别配 2:1 和 1:2两个 cropper 实例 pushOrign 同一张 src再依次导出。导出的关键在 getCropperImage 的 opt 上getCropperImage({ fileType: jpg, quality: 0.9 }, cb)它继承自 wx.canvasToTempFilePath 的参数格式、质量都能控制。避坑清单✅现象裁剪框错位、导出图全黑 →解法width/height 和画布真实尺寸不一致或 cut 超出了画布范围。先把 WXML 里画布的样式和构造器参数对齐再排查别的。现象图片挪不动手势无反应 →解法touchStart/touchMove/touchEnd 三个事件漏绑或者绑了但事件对象 e 没透传给实例方法。现象导出图发糊 →解法pixelRatio 没传或传成了 1用wx.getSystemInfoSync().pixelRatio的实时值。现象canvas2d 模式跑不起来 →解法新 2D 绘制接口要求基础库 2.9.0 以上且构造时要传 canvas 和 ctx老基础库就老老实实用 id targetId 的默认方案。现象getCropperBase64 无响应 →解法它要求基础库 1.9.0 起低版本改走 getCropperImage 拿临时文件路径。延伸资源we-cropper 使用的标准答案都在这三处遇到怪问题先翻这里we-cropper 完整 API 速查构造器参数、实例方法、事件监听一页看全官方文档主 README接入细节和变更日志changelog都在一起example/ 目录示例代码头像裁剪、网络图片、canvas2d 等成品页面直接抄作业跑通之后欢迎去 issue 区提需求或者提 PR。【免费下载链接】we-cropper微信小程序图片裁剪工具项目地址: https://gitcode.com/gh_mirrors/we/we-cropper创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考