移动端头像上传的客户端自动裁剪核心是响应式交互、自适应裁剪区域与前端像素级控制，需通过Canvas实现等比缩放、边界限制拖拽、dpr适配及JPEG压缩输出，禁用img宽高百分比以保障坐标精度。
移动端头像上传的客户端自动裁剪，核心不是“响应式图片”，而是“响应式交互 + 自适应裁剪区域 + 前端像素级控制”。H5 本身不支持服务端式自动裁剪，所有裁剪必须在浏览器内完成，且需适配不同屏幕、设备像素比（dpr）、图片原始尺寸和目标头像比例（通常是 1:1）。
关键点：裁剪前先做尺寸归一化
用户选图后，图片原始宽高千差万别。直接拖拽缩放容易错位，尤其在 iOS Safari 或安卓低端机上。必须先将图片按约束逻辑缩放到一个“可控画布”中：
- 设定统一裁剪容器尺寸（如 300×300px CSS 像素），但实际 canvas 物理像素要乘以 window.devicePixelRatio，避免模糊
- 保持图片等比缩放，优先适配容器长边；超出部分用 overflow: hidden 或 canvas 裁剪边界控制
- 禁止直接设 img 的 width/height 百分比——会导致自然尺寸失真，影响后续坐标计算
裁剪区域必须固定宽高比，且居中默认
头像几乎都要求正方形，所以裁剪框不能自由拉伸。推荐做法：
- 初始化时，裁剪框默认居中、占满容器可用区域（如容器 300×300，裁剪框就设为 240×240）
- 用户只能平移（touchmove / mousedown+drag），不能缩放或旋转（除非明确需求）
- 拖拽边界需限制：x ∈ [-(imgWidth - cropWidth)/2, (imgWidth - cropWidth)/2]，y 同理，防止空白露出
Canvas 输出要兼顾质量与体积
裁剪结果不是简单截图，需主动压缩再转出：
- 用 canvas.toDataURL('image/jpeg', 0.85) 替代默认 PNG，减小约 60% 体积
- 输出尺寸建议控制在 400×400 像素以内（服务端通常也只存这个量级），避免大图上传失败或超时
- 若需更高清，可先生成 800×800 的 base64，再用 Blob + FormData 上传，不走 dataURL 字符串拼接
真机适配几个易漏细节
模拟器跑得通 ≠ 手机能用好：
- iOS Safari 对 input[type=file] 的 accept 属性更敏感，务必写 accept="image/*"，不要限定 jpg/png（部分微信内置浏览器会拒掉 HEIC）
- 安卓 WebView 中 touch 事件需加 e.preventDefault() 防止页面滚动干扰拖拽
- 某些低端机 canvas 绘制慢，建议在 drawImage 前加 ctx.clearRect(0, 0, canvas.width, canvas.height) 清空缓存
- 裁剪后预览图用 URL.createObjectURL(blob) 显示，比 base64 更省内存，也避免长字符串卡顿
