核心是用FileReader读取file为data URL供canvas裁剪，需防移动端touch默认行为、正确使用drawImage九参数、toBlob时指定mimeType和文件名。
用 input[type="file"] 触发图片选择，但别直接上传
用户点选图片后，必须先在前端读取为 Blob 或 data URL，否则无法裁剪。直接把 input 的 files[0] 丢给后端，等于放弃所有裁剪控制权。
关键操作是用 FileReader 读取：
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.src = e.target.result; // 这才是可绘入 canvas 的源
};
reader.readAsDataURL(file);
注意：readAsDataURL 生成的 base64 字符串体积大，若图片超 2MB，部分低端安卓 WebView 会卡死或报 DOM Exception 8；换成 readAsArrayBuffer + createObjectURL 更稳妥。
canvas 裁剪时，drawImage 的 9 参数容易配错
裁剪不是“截屏”，而是用 ctx.drawImage() 控制源图哪一块、以什么尺寸画到 canvas 上。最易错的是参数顺序和含义混淆：
立即学习“前端免费学习笔记（深入）”；
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)- 前 5 个是「从原图哪里取多大一块」，后 4 个是「画到 canvas 哪里、画多大」
- 若想等比缩放后裁剪中心 200×200 区域，不能只调
sx/sy，必须同步算好sWidth/sHeight缩放比例
常见错误：传了 sx=0, sy=0 就以为裁了左上角，结果因原图宽高比和 canvas 不一致，实际裁出歪斜变形区域。
移动端 touch 事件拖拽裁剪框，要防默认行为
在 iOS Safari 或安卓 Chrome 上，用 touchstart/touchmove 拖动裁剪框时，页面会跟着滚动或缩放，导致拖拽失灵。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
必须在事件回调里加：
event.preventDefault(); // 阻止滚动 event.stopPropagation(); // 防止冒泡触发父容器手势
但注意：如果裁剪框外层容器设置了 overflow: scroll，仅靠 preventDefault 不够，还得给该容器加 CSS：
touch-action: none;
否则 iOS 会优先响应系统级双指缩放，touchmove 根本收不到连续坐标。
生成裁剪结果时，toBlob 的 MIME 类型和质量值影响大
调用 canvas.toBlob(callback, mimeType, quality) 输出裁剪图，这里两个参数很关键：
-
mimeType必须和原始图一致（如"image/jpeg"），否则 iOS Safari 上传后可能被后端识别为损坏文件 -
quality在 0.6–0.8 之间较平衡；设为1会导致 JPEG 文件体积暴涨 3–5 倍，且肉眼几乎看不出提升 - 若原始图是 PNG（含透明通道），强行用
"image/jpeg"会丢透明度，此时应检测img.src后缀或用file.type判断
最后上传时，别把 Blob 直接塞进 FormData 的 append('avatar', blob) —— 这样后端收到的文件名是空字符串，某些框架（如 Express multer）会拒收。务必指定文件名：
formData.append('avatar', blob, 'avatar.jpg');
裁剪逻辑本身不难，难的是在各种设备上保持坐标精准、手势稳定、输出可控——尤其 iOS 对 touch-action 和 toBlob 的兼容性，稍不注意就白屏或上传失败。
