原生html+javascript图片裁剪上传核心是预览→裁剪计算→生成blob三步：先用img.naturalwidth/height获取真实像素，canvas尺寸与裁剪坐标须按此比例换算；toblob兼容性差时降级todataurl转blob；需校验mime、clamp裁剪参数并处理exif方向。
直接用原生 HTML + JavaScript 实现可靠、可控的图片裁剪上传，不依赖重型 UI 库（比如 jQuery 插件或 React 组件），关键在于分清三步：预览 → 裁剪计算 → 生成 Blob。多数人卡在 canvas 坐标换算和 toBlob 兼容性上。
canvas.drawImage 的坐标和尺寸必须按真实像素处理
浏览器缩放、CSS 设置 width/height 会让 <img> 显示尺寸 ≠ 原图尺寸，但 canvas.drawImage 只认原始像素。若直接用 img.width 和 img.height 当画布尺寸，裁剪框拖动时会偏移。
- 读取图片后，用
img.naturalWidth/img.naturalHeight获取真实像素尺寸 - canvas 的
width/height属性必须设为自然尺寸，不能设为 CSS 显示尺寸 - 裁剪框坐标（
x,y,width,height）也需按相同比例映射回自然尺寸，例如：realX = cropX * (img.naturalWidth / displayWidth)
toBlob 在 Safari 和旧版 Android 上可能失败
canvas.toBlob() 在 iOS 14.5+ 和大多数安卓 Chrome 中可用，但在 Safari 12–13 或部分国产 WebView 中会静默失败（回调不执行、也不抛错）。必须降级到 toDataURL + dataURLtoBlob。
- 优先尝试
canvas.toBlob(callback, 'image/jpeg', 0.9) - 若
callback超时（如 500ms 未触发），改用canvas.toDataURL('image/jpeg', 0.9) - 手动转成 Blob：
fetch(dataUrl).then(res => res.blob())，或用atob+Uint8Array解析 base64（更兼容但稍重）
input[type="file"] 的 accept 属性要限制 image/*，但别信它
accept="image/*" 只过滤文件选择器界面，用户仍可绕过（比如拖入 .txt 文件、或修改 extension 后上传）。服务端校验不可少，前端也要做基础 MIME 检查。
- 读取文件后，用
file.type.startsWith('image/')初筛 - 进一步用
new FileReader().readAsArrayBuffer(file)读前 4 字节，比对 JPEG（FF D8 FF）、PNG（89 50 4E 47）签名（可选，防伪造） - 避免直接用
file.name后缀判断，容易被欺骗
裁剪区域超出图片边界时，drawImage 会自动截断，但你要主动 clamp
canvas.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 中的 sx/sy 若为负数、或 sWidth/sHeight 超出原图范围，canvas 会静默截断——结果是裁出来黑边或缺角，而非报错。
- 在调用
drawImage前，显式修正裁剪参数：sx = Math.max(0, Math.min(sx, img.naturalWidth - sWidth)) - 同理处理
sy、sWidth、sHeight，确保它们构成的矩形完全落在[0,0, naturalWidth, naturalHeight]内 - UI 层也应限制拖拽/缩放边界，但 JS 层的 clamp 是最后一道防线
真正麻烦的不是画布操作，而是不同设备下图片方向（EXIF orientation）、缩放比例、文件编码差异带来的隐性偏差。哪怕只支持 JPG/PNG，也要在 load 后检查 img.decode() 是否完成，再开始裁剪计算——否则 iOS 上常出现 canvas 为空白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
