uni-app中不可直接使用cropper.js，因其依赖DOM API且不兼容非H5平台；应采用uni-app原生方案：uni.chooseImage + canvas + uni.canvasToTempFilePath实现跨端裁剪，注意canvas-id声明、devicePixelRatio校正、draw回调及小程序域名白名单配置。
uni-app里用 cropper.js 会直接报错
直接在 uni-app 的 Vue 页面里 import Cropper from 'cropperjs'，运行到真机或 H5 会白屏，控制台报 document is not defined 或 window is not defined。这是因为 cropper.js 依赖 DOM API，在 uni-app 的非 H5 平台（如小程序、App）中无法访问原生 document，且其初始化逻辑默认绑定到 img 标签——而 uni-app 的 <image></image> 组件不是标准 DOM 元素，不支持 cropper 的底层操作。
真正能跑通的裁剪方案：uni-app 自带的 canvas + uni.chooseImage + uni.canvasToTempFilePath
绕过第三方插件，用 uni-app 原生能力组合实现可控、跨端（H5/微信小程序/APP）的裁剪上传，核心流程是：选图 → 渲染到 canvas → 手动计算裁剪区域 → 导出裁剪后图片 → 上传。关键点在于：
-
uni.chooseImage获取图片临时路径（注意count: 1和sourceType限制） - 用
<canvas canvas-id="cropperCanvas" style="width: 375px; height: 375px;"></canvas>声明画布，不能用ref或id操作，必须用canvas-id - 通过
uni.createCanvasContext('cropperCanvas', this)获取上下文，再用drawImage把图片按比例缩放绘制进去 - 裁剪坐标需手动换算：原始图宽高 ≠ canvas 宽高 ≠ 屏幕像素，要用
uni.getSystemInfoSync().pixelRatio校正 devicePixelRatio - 导出前务必调用
context.draw(true, () => {...})，否则uni.canvasToTempFilePath返回空路径
微信小程序平台要额外加 allowedOrigins 白名单
如果裁剪后调用 uni.uploadFile 上传失败，返回 fail net::ERR_CONNECTION_REFUSED 或直接静默失败，大概率是小程序安全策略拦截。需在 manifest.json → 微信小程序配置 → 服务器域名 中，把你的上传接口域名填进 request 和 uploadFile 两项；若用的是本地调试地址（如 http://192.168.x.x:8080），必须在 mp-weixin/project.config.json 里显式添加：
"permission": {
"scope.userFuzzyLocation": {
"desc": "位置信息"
}
},
"allowedOrigins": ["http://192.168.x.x:8080"]
否则 iOS 真机下 uploadFile 会被直接拒绝，连请求都发不出去。
裁剪区域拖拽缩放的手势逻辑不能靠 touchstart/move 简单实现
想让用户自由拖拽、双指缩放裁剪框？别直接监听 touch 事件自己算位移——uni-app 的 touchmove 在不同平台触发频率差异极大（H5 高频，小程序节流严重），且没有统一的 pinch-to-zoom 事件。更稳妥的做法是：
- 用两个按钮（+ / −）控制缩放系数，配合左右上下按钮微调位置
- 或者接入
@wya-team/uni-cropper这类专为 uni-app 封装的组件（它内部已处理 canvas 坐标映射和平台差异） - 若坚持手势，必须对
touchmove做防抖（clearTimeout+setTimeout）、合并多点触控 delta，并在每次更新后重绘 canvas —— 否则安卓低端机极易卡顿甚至 crash
实际项目中，80% 的业务场景用固定比例（如 1:1 正方形裁剪）+ 拖拽居中就够了，强行做全功能手势反而增加兼容性风险和测试成本。
