Canvas裁剪前必须确保图片加载完成，裁剪坐标需为整数并校验边界，导出时注意MIME类型与质量参数，高DPR设备需用devicePixelRatio校正坐标。
Canvas 裁剪前必须确保图片已加载完成
直接对 Image 对象调用 drawImage 但没等 onload 触发，会导致画布空白——这是最常被忽略的起点错误。Canvas 不会自动等待图片加载，img.src = url 后立即绘图，此时图片数据尚未就绪。
实操建议：
- 始终把裁剪逻辑写在
img.onload回调里，或使用Promise封装加载过程 - 若图片来自用户
<input type="file">，需用FileReader读取为data URL后再赋给img.src - 避免在
img.addEventListener('load', ...)外部直接操作ctx.drawImage
裁剪区域坐标和尺寸必须用整数传给 drawImage
drawImage 的九参数裁剪语法：ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。其中前四个（sx, sy, sWidth, sHeight）定义源图像上的裁剪矩形，它们必须是有效数值，且不能超出原图尺寸，否则静默失败或只画出部分。
常见错误现象：
立即学习“Java免费学习笔记（深入）”；
-
sx或sy为负数 → 裁剪区偏移出界，结果为空白或黑块 -
sWidth或sHeight超过原图对应方向尺寸 → 实际裁出区域被截断，边缘像素丢失 - 传入小数（如
12.7）→ Canvas 内部会四舍五入，但可能导致 1px 偏差，在高缩放比下明显
建议：用 Math.floor() 或 |0 显式转整数，并加边界校验：sx = Math.max(0, Math.min(sx, img.width - sWidth))
将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。
导出裁剪结果时注意 toDataURL 的 MIME 类型与质量控制
调用 canvas.toDataURL('image/jpeg', 0.9) 才能输出带压缩的 JPEG；若只传 'image/jpeg'（无质量参数），部分浏览器（如旧版 Safari）可能忽略质量设置，返回未压缩的巨图。
使用场景差异：
- 头像类裁剪 → 推荐
'image/png'，保留透明背景（如果原图有 alpha） - 内容图/封面图 → 用
'image/jpeg'+0.8–0.95平衡清晰度与体积 - 需要最大兼容性 → 避免
'image/webp'，IE 和部分安卓 WebView 不支持
性能提示：大图（如 4000×3000）调用 toDataURL 可能阻塞主线程，可考虑用 canvas.toBlob(callback, type, quality) 异步导出。
移动端触摸事件中计算裁剪框需适配设备像素比
在 Retina 屏或高 DPR 设备上，canvas.width/canvas.height 是 CSS 像素值，但绘图坐标系按物理像素工作。若直接用 touch.clientX 计算裁剪位置，会因未缩放导致裁剪框偏小、错位。
关键步骤：
- 获取设备像素比：
const dpr = window.devicePixelRatio || 1 - 设置 canvas 物理尺寸：
canvas.width = canvas.clientWidth * dpr，同理设height - CSS 中保持
canvas { width: 100%; height: auto; }，让显示尺寸由 CSS 控制 - 触摸坐标需除以
dpr后再用于裁剪计算
漏掉 dpr 校正，iOS 上裁剪结果大概率只有预期的 1/2 大小，且位置漂移。
