必须等图片加载完成再调用 drawimage()，否则静默失败；需手动创建 image 实例、先绑定 onload 再设 src；跨域图须设 crossorigin='anonymous' 且服务端配 cors；拖放需 preventdefault 并走完整 onload 绘制流程。
必须等图片加载完成再调用 drawImage()，否则画布上什么也看不到——这不是报错，而是静默失败。
创建 Image 对象并监听 onload
Canvas 不会自动加载图片，得手动创建 Image 实例，设置 src，并在 onload 回调里绘制：
- onload 必须在设置 src 前绑定，否则缓存命中时事件可能直接跳过
- 别依赖
img.complete判断是否可画，它只反映是否从缓存读取，不保证已解码 - 用户上传的文件（
File或URL.createObjectURL()）同样要走 onload 流程
正确使用 drawImage() 的三种参数形式
所有写法都要求图像对象必须是第一个参数，顺序错位会导致图“消失”：
-
ctx.drawImage(img, x, y)：整图原尺寸，左上角定位到 (x, y) -
ctx.drawImage(img, x, y, width, height)：拉伸/压缩到指定宽高（非等比会变形） -
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)：先裁剪源图区域，再缩放贴到目标位置；9个参数建议拆成变量传入，避免数错
跨域图片要防画布污染
若图片来自 CDN 或其他域名，后续想用 getImageData() 或 toDataURL() 就会触发安全错误：
- 前端需加
img.crossOrigin = 'anonymous'，且必须写在src赋值前 - 服务端要配置
Access-Control-Allow-Origin响应头，否则即使加了 crossOrigin 仍会污染 - 污染后无法读像素、导出图片，但绘制本身不受影响
拖拽图片到 Canvas 的处理要点
Canvas 本身不是接收拖放的容器，不能像 div 那样直接插入 img 元素：
- 要在
dragover事件中调用ev.preventDefault()，否则drop不会触发 - 拖放源可用
dataTransfer.setData('text/plain', index)传索引，避免重复 URL 或跨域问题 - 实际绘制仍需走 Image + onload + drawImage 流程，在渲染逻辑中主动完成
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
