确保图片成功绘制需先加载完成再调用drawImage()，正确顺序为：创建Image实例→设置onload回调→最后赋值src；跨域图片须设crossOrigin='anonymous'并服务端配合CORS。
直接用 drawImage() 把外部图片画到 canvas 上，关键不是“怎么调用”，而是“怎么确保它真能画出来”。很多空白画布、无声失败，其实都卡在加载时机或跨域设置上。
图片必须先加载完成再绘制
浏览器加载图片是异步的。如果写成这样：
❌ 错误示范
const img = new Image();<br> img.src = 'photo.jpg';<br> ctx.drawImage(img, 0, 0); // 此时 img 还没加载完，画布为空
正确做法是把绘制逻辑放在 onload 回调里：
- 创建
Image实例 - 给
img.onload赋值一个函数，在里面调用drawImage() -
最后才设置
img.src（顺序不能颠倒）
示例：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const img = new Image();<br>
img.onload = () => {<br>
canvas.width = img.width;<br>
canvas.height = img.height;<br>
ctx.drawImage(img, 0, 0);<br>
};<br>
img.src = 'photo.jpg'; // ✅ 放在最后
用最简参数签名：drawImage(img, x, y)
要完整原尺寸绘制，就用 2 参数形式：
-
ctx.drawImage(img, 0, 0)表示从画布左上角 (0, 0) 开始，按图片原始宽高绘制 - 前提是 canvas 尺寸已匹配图片尺寸（如上面示例中动态设置了
canvas.width/height），否则可能被裁剪或留白 - 不需要传宽高参数，避免意外缩放
跨域图片必须加 crossOrigin 声明
如果图片来自其他域名（比如 CDN、图床、用户上传链接），即使 drawImage() 看似成功，canvas 也会被“污染”，后续无法读取像素或导出数据。
- 在设置
src前，加上img.crossOrigin = 'anonymous' - 服务端必须返回
Access-Control-Allow-Origin: *或对应源，否则无效 - 本地开发时（
file://协议）也建议加，避免环境差异导致问题
完整安全写法：
const img = new Image();<br>
img.crossOrigin = 'anonymous'; // 关键<br>
img.onload = () => {<br>
canvas.width = img.width;<br>
canvas.height = img.height;<br>
ctx.drawImage(img, 0, 0);<br>
};<br>
img.src = 'https://cdn.example.com/photo.jpg';
补充：data URL 图片可跳过 onload？
如果是 base64 编码的 data URL（如 data:image/png;base64,...），浏览器通常能同步解析，onload 仍推荐保留——因为部分低版本浏览器或超大图片仍有异步行为，加了更稳妥。
