uni-app头像圆形裁剪需手动实现：选图→canvas预览→拖拽缩放→clip()后drawImage截圆→平台适配导出。关键点：clip()必须在drawImage前调用；canvas宽高设为256等2的幂次；坐标需经容器位置、缩放比双重换算。
uni-app里没有内置圆形裁剪组件，得自己搭
uni-app 的 uni.chooseImage 和 uni.uploadFile 只负责选图和上传，裁剪逻辑完全不包含。所谓“头像编辑”，本质是：选图 → 渲染可拖拽缩放的预览 → 用户手动框选圆形区域 → 截取该区域生成新图片。这个过程必须靠 canvas 手动实现，不能依赖任何“一键裁剪”插件——市面上多数所谓“uni-app裁剪插件”在 H5 和小程序平台行为不一致，iOS真机常卡死或返回空白图。
canvas drawImage 裁剪圆形时，clip() 必须在 drawImage 之前调用
这是最常踩的坑：很多人先 ctx.drawImage() 把整图画上去，再 ctx.clip()，结果什么都没裁到。因为 clip() 只对后续绘制生效，对已画内容无效。正确顺序是：
ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); ctx.clip(); // ⚠️ 必须在这一步之后再 drawImage ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
注意：裁剪圆心坐标 centerX/centerY 是相对于 canvas 坐标系的，不是原始图片坐标；sx/sy/sw/sh 是你要从原图截哪一块（比如缩放后居中显示的部分），dx/dy/dw/dh 是把它画到 canvas 上的位置和大小——这两组参数共同决定最终圆形区域内显示哪一部分原图。
不同平台 canvas 导出图片的兼容性差异
canvas.toDataURL() 在微信小程序、支付宝小程序、H5 表现基本一致；但 App 端（iOS）用 uni.canvasToTempFilePath 时，若 canvas 宽高不是 2 的整数次幂（如 200×200 可以，217×217 就可能失败），会静默返回空字符串。解决方案：
- 统一将 canvas 宽高设为 256 或 512（推荐 256，兼顾清晰度与内存）
- 裁剪前把原始图片等比缩放到 canvas 尺寸内，用
image.width / image.height判断横竖构图，再计算sx/sy/sw/sh - App 平台必须用
uni.canvasToTempFilePath，不能用toDataURL，否则 iOS 无法上传
用户交互时的坐标换算容易错乱
页面上看到的图片是经过 CSS 缩放（transform: scale()）或 flex 布局拉伸的，但 canvas 绘制坐标系是独立的。直接拿 touch 事件的 e.touches[0].clientX 去算圆心，必然偏移。必须做两层换算：
- 用
uni.createSelectorQuery()获取图片容器的真实宽高和位置（boundingClientRect） - 用
touch.clientX - rect.left得到相对容器的坐标，再按图片实际渲染宽高与原始 canvas 宽高的比例缩放回去 - 如果容器用了
transform: scale(0.8)，还要额外除以 0.8 —— 这个值必须从 computed style 动态读，不能硬编码
少做其中任何一环，拖动圆框时都会“跟手但不对齐”，用户以为功能坏了。
