cropper.js 初始化时容器需设明确像素宽高，旋转须启用rotatable并监听ready事件，导出canvas需适配dpr，移动端需禁用touch默认行为。
初始化 Cropper.js 时 container 必须有明确宽高
如果 img 父容器（比如 <div id="cropper-container"></div>）没设 width 和 height，Cropper.js 会渲染失败或裁剪框错位，控制台可能不报错但拖拽/缩放无响应。
实操建议：
- 给容器加内联样式或 CSS 类，例如：
style="width: 600px; height: 400px;" - 避免用
%或vh/vw初始化——Cropper.js 早期版本（如 v1.5.x）对相对单位支持不稳定 - 若需响应式，先用 JS 获取父容器实际像素尺寸再初始化：
const box = document.getElementById('cropper-container'); const w = box.clientWidth; const h = box.clientHeight;
旋转操作必须启用 rotatable: true 并监听 ready 事件
Cropper.js 默认禁用旋转，即使调用 rotate(90) 也不会生效，且不会抛错。真正生效的前提是初始化时开启旋转，且确保 DOM 已就绪。
常见错误现象：点击旋转按钮界面不动，cropper.rotate(45) 执行后图片无变化。
实操建议：
- 初始化时显式设置：
rotatable: true, scalable: true, zoomable: true - 旋转动作必须在
ready回调里触发，否则cropper实例尚未完成内部坐标计算：new Cropper(image, { rotatable: true, ready() { this.rotate(90); } }); - 注意：
rotate()是累加值，不是绝对角度；如需重置，用rotate(0)，而非reset()（后者不重置旋转）
getCroppedCanvas() 导出时图像模糊或比例失真
导出 canvas 图片模糊，通常是因为未指定输出尺寸，导致浏览器按设备像素比（dpr）自动缩放，而 Cropper.js 默认按 CSS 像素输出。
使用场景：头像裁剪、证件照上传，要求清晰锐利。
实操建议：
- 手动传入高倍 canvas 尺寸并缩放绘图上下文：
const canvas = cropper.getCroppedCanvas({ width: 800, height: 600 });<br>const scaledCanvas = document.createElement('canvas');<br>const ctx = scaledCanvas.getContext('2d');<br>scaledCanvas.width = 800 * window.devicePixelRatio;<br>scaledCanvas.height = 600 * window.devicePixelRatio;<br>ctx.scale(window.devicePixelRatio, window.devicePixelRatio);<br>ctx.drawImage(canvas, 0, 0, 800, 600); - 忽略
maxWidth/maxHeight参数——它们只限制原始 canvas 尺寸，不影响最终输出质量 - 若后端要求固定宽高比，务必在
getCroppedCanvas()前确认getData()返回的width/height比例与预期一致，否则强行拉伸会导致变形
移动端 touch 交互失效或双指缩放冲突
在 iOS Safari 或部分安卓浏览器中，双指缩放会触发页面缩放，覆盖 Cropper.js 的 zoom 行为；单指拖拽偶尔失灵，尤其在 position: fixed 容器里。
性能影响：未禁用默认行为会导致 touchmove 频繁重排，滑动卡顿。
实操建议：
- 初始化前加 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 给 cropper 容器加 CSS：
touch-action: none;（关键！否则 touchmove 被浏览器拦截） - 避免将 cropper 放在
overflow: hidden且高度由内容撑开的父元素中——iOS 下 touchstart 可能无法捕获 - 如需兼容微信内置浏览器，建议用
movable-area+movable-view替代方案，Cropper.js 在某些 WKWebView 版本下 touch 事件丢失较严重
Cropper.js 的旋转和缩放逻辑耦合在内部矩阵变换中，一旦初始化参数或 DOM 状态不对，后续所有交互都可能静默失败。最易被忽略的是 touch-action 和 devicePixelRatio 处理——这两个点不修，其他功能做得再全也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
