we-cropper实战：5分钟速通微信小程序图片裁剪-北京尧图网络

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），仅供参考

we-cropper实战：5分钟速通微信小程序图片裁剪

相关推荐

如何快速把网页小说变成电子书：小说下载器 10 分钟新手完整指南

Wand 免费版 2 小时限时？用 Wand-Enhancer 免费解锁完整专业版能力

把微信聊天记录一键导出成文档：WeChatMsg 完整上手指南

更多资讯

用AI辅助开题报告写作：从选题到成稿的四层实战工作流

Huffman编码的字节对齐与MFC内存序列化实战

Absolute Database v7.90 多用户版部署与故障排查指南

SSH三层架构毕设项目：真实可运行的时装设计交流网

ML307R OpenCPU SDK实战：嵌入式AI模型部署与烧录全链路指南

MMU内存管理单元深度解析：从虚拟地址到物理地址的完整过程

今日更新

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？