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 转换这一整条链路上任意一环没对齐，都会导致白屏、偏移、糊图、上传失败——这些细节不打日志根本看不出问题。