用canvas实现可拖拽缩放裁剪需处理坐标转换、跨域、DPR和触摸事件四层问题：图片须加crossOrigin="anonymous"；canvas宽高需乘devicePixelRatio并ctx.scale(dpr,dpr)；触摸事件用touches[0]并preventDefault；cropperjs需设viewMode:1、autoCropArea:1等关键配置。
用 canvas 实现可拖拽缩放的图片裁剪面板
原生 HTML 没有内置裁剪控件，必须靠 canvas + 事件监听手动实现。核心逻辑是：把图片画到 canvas 上，再用一个透明矩形（裁剪框）叠加在上面，通过鼠标/触控拖动、缩放这个矩形，最后用 canvas.getContext('2d').getImageData() 或 canvas.toDataURL() 结合 drawImage 的九参数版本截取对应区域。
关键点在于坐标转换——图片可能被缩放、平移，裁剪框的像素位置必须实时映射回原始图片坐标。别直接拿鼠标 clientX/clientY 当裁剪坐标用，要减去 canvas 偏移、除以缩放比、再考虑图片在 canvas 中的实际绘制起始点。
常见错误现象：getImageData 报错 “The canvas has been tainted by cross-origin data” —— 图片跨域了，必须加 crossOrigin="anonymous" 属性并确保服务端允许 CORS。
cropperjs 的最小可用配置和坑点
如果不想手写，cropperjs 是目前最轻量且维护活跃的方案。但它默认行为容易误导：初始化后裁剪框不是居中覆盖整图，而是按比例缩放到 fit-container 模式，导致顶部留白、裁剪区偏小。
立即学习“前端免费学习笔记（深入）”；
必须显式设置关键选项：
-
aspectRatio: 1（如需正方形裁剪，不设则自由比例） -
viewMode: 1（禁止缩放出画布外；viewMode: 2允许缩放但会强制居中，反而更难精准选区） -
autoCropArea: 1（让初始裁剪框占满整个图片，而不是默认的 0.8） -
movable: true和resizable: true（默认为 true，但显式写出更稳妥）
注意：getCroppedCanvas() 返回的是新 canvas，不是原图；若需 PNG 透明背景，调用时传 { imageType: 'image/png' }，否则默认输出 JPEG（会把透明变黑）。
移动端 touch 事件下裁剪框响应迟滞或错位
直接复用 PC 的 mousedown/mousemove 逻辑在手机上基本不可用。必须监听 touchstart/touchmove/touchend，且每次 touchmove 要调用 event.preventDefault() 阻止页面滚动，否则手指一滑就触发页面拖拽，裁剪框完全失控。
另一个关键细节：touches[0] 才是当前接触点，别用 changedTouches[0] —— 它只在 touchend 时包含离开点，在 touchmove 中行为不一致。
坐标计算也要改：用 touch.clientX - canvas.getBoundingClientRect().left，不能用 pageX，因为 pageX 包含页面滚动偏移，而 canvas 位置是相对于视口的。
导出裁剪结果时尺寸失真或模糊
很多人导出的图比预期小一半、边缘发虚，问题出在设备像素比（window.devicePixelRatio）。Canvas 绘制时若没考虑 DPR，高分屏下实际渲染分辨率只有 CSS 尺寸的一半，再用 toDataURL 导出，等于把模糊图放大保存。
修复方法：创建 canvas 时手动放大宽高，并用 CSS 缩回显示尺寸：
const dpr = window.devicePixelRatio || 1;
const canvas = document.getElementById('crop-canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
ctx.scale(dpr, dpr); // 让绘图坐标系对齐后续所有 drawImage、getImageData 都基于这个放大后的 canvas，导出质量才正常。漏掉 ctx.scale() 这一步，图片内容会挤压变形。
裁剪逻辑本身不复杂，但坐标映射、跨域、DPR、触摸事件这四层嵌套下来，任何一个漏判都会让面板“看起来能动，导出却不对”。
