uni-app中图片裁剪需先选图再前端处理：H5用input或uni.chooseImage获取路径，小程序/App需用uni.getImageInfo或canvas操作；推荐vue-cropper但须v-if控制、$nextTick+setTimeout初始化；裁剪后用canvas.toDataURL('image/jpeg',0.8)或uni.canvasToTempFilePath压缩输出，尺寸建议400×400以内、宽高比1:1；真机偏移需按pixelRatio适配canvas物理像素。
uni-app 里用 uni.chooseImage 拿图后怎么接剪裁
不能直接传给后端，得先在前端做裁剪。uni-app 自身不提供原生裁剪组件，得靠第三方库或自己调 canvas 实现。最稳的路径是：选图 → 转成 base64 或临时文件路径 → 丢进裁剪组件（如 vue-cropper）→ 输出裁剪后的 base64 或 Blob。
注意：uni.chooseImage 在 H5 和小程序行为不一致——H5 返回的是 tempFiles[0].path（本地文件路径），而微信小程序返回的是 tempFilePaths[0]（也是路径，但不可直接读取二进制），必须用 uni.getImageInfo 或转 canvas 才能操作像素。App 端同理，不能直接 fs.readFile 读取。
- 优先用
count: 1限制单图，避免多图逻辑干扰裁剪流程 - 别用
sourceType: ['album']就完事，加['camera', 'album']更符合头像场景 - H5 下若用
input[type="file"]替代uni.chooseImage，后续 canvas 处理更可控，但需自行处理兼容性
vue-cropper 在 uni-app 里为什么报错 document is not defined
这是 SSR 或条件编译没切对导致的。uni-app 的 vue-cropper 必须只在非服务端、非 App 端（即 H5 + 小程序）运行，且不能在 onLoad 阶段就初始化 DOM 组件。
常见错误是：在 data 里直接 new Cropper，或在 mounted 里没判断平台就调用 document.getElementById。小程序没有 document，H5 有但可能还没挂载完。
- 用
uni.getSystemInfoSync().platform !== 'app'做运行时守卫 - 把裁剪组件包裹在
v-if="showCropper"中，等图片加载完成再设为 true - 初始化 cropper 实例前，确保 DOM 已就绪，推荐在
$nextTick+setTimeout(..., 0)双保险下操作 - 别在
onLoad或data里写new Cropper(...)，放到onReady后的手动触发函数里
裁剪后怎么生成适合上传的图片格式和尺寸
用户随手拍的图动辄几 MB，直接上传既慢又浪费带宽。裁剪不是终点，还得压缩、转格式、控尺寸。关键点在于：canvas toDataURL 的质量参数和 mime 类型控制，以及是否保留 alpha 通道。
比如头像一般要圆形/方形 + 200×200px 以内 + JPG（无透明需求），那就要主动指定 image/jpeg 并设 quality ≈ 0.8；如果支持 PNG（如需要透明背景），就得确认后端真能解析，否则会 500。
-
canvas.toDataURL('image/jpeg', 0.8)比默认的image/png小 60%+，但会丢透明通道 - 用
uni.canvasToTempFilePath（小程序）或canvas.toBlob（H5）替代toDataURL，避免 base64 膨胀 33% - 裁剪框宽高比建议固定为
1:1，避免后端还要二次裁切；用aspectRatio: 1传给 vue-cropper - 别依赖用户原始分辨率，
outputWidth/outputHeight设为 400 或 600 即可，再大对头像没意义
小程序真机调试时裁剪区域偏移或黑屏
本质是 canvas 渲染坐标系没对齐。小程序的 canvas 是通过 selector 定位的，而 vue-cropper 默认用绝对定位 + transform 缩放，容易和小程序的 rpx/dpr 混淆。真机上尤其 iOS 微信，dpr=3 时，1px 的 canvas 像素会被拉伸模糊甚至错位。
解决思路不是调 zoom，而是统一用物理像素画布 + 手动缩放图像。uni-app 提供的 uni.createCanvasContext 是安全出口，但得放弃 vue-cropper，改用原生 canvas 流程。
- 用
uni.getSystemInfoSync().pixelRatio获取设备 dpr，创建 canvas 时宽高 × dpr - 设置 canvas.style.width/style.height 为设计稿尺寸（如 300rpx），保持视觉比例
- drawImage 时，源图尺寸也要按 dpr 缩放，否则图像被压缩变形
- 真机测试务必关掉「调试基础库版本」，用当前线上基础库（如 3.4.11），旧版 canvas API 行为差异极大
裁剪功能里最麻烦的从来不是选图或 UI，而是跨平台 canvas 坐标、像素、dpr、base64/Blob 转换这一整条链路上任意一环没对齐，都会导致白屏、偏移、糊图、上传失败——这些细节不打日志根本看不出问题。
