canvas导入外部图片需先用image对象加载并监听onload事件，再调用drawimage绘制；支持四种图片来源，drawimage有三种参数形式实现原尺寸、缩放或裁切绘制；跨域图片需配置cors避免污染画布。
Canvas 导入外部图片并绘制，核心是用 Image 对象加载图片，等它完全就绪后再调用 drawImage()。关键不在“能不能”，而在“什么时候画”——必须等图片加载完成，否则 canvas 上什么也不会出现。
确保图片加载完成再绘制
直接设置 img.src 后立刻调用 drawImage() 是无效的，因为图片还在下载中。必须监听 onload 事件：
- 创建
new Image()实例 - 给它绑定
img.onload = function() { ... } - 在回调函数里执行
ctx.drawImage(img, x, y) - 最后才设置
img.src = 'xxx.jpg'（顺序不能错）
四种常见图片来源方式
Canvas 支持从多个渠道获取图像，不只是本地路径：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
页面内已有
<img>标签：用document.getElementById('myImg')或document.images[0]直接取 -
其他已绘制好的
<canvas></canvas>：同样可用document.getElementById('otherCanvas')作为drawImage的第一个参数 -
脚本动态创建
Image对象（最常用）：适合按需加载、URL 可变的场景 - Data URL（base64 编码图片）：把图片内容直接写进 src，无需网络请求，但体积大、无法缓存
drawImage 的三种用法
同一个方法，靠参数数量区分功能：
-
drawImage(img, x, y)：原尺寸绘制，左上角定位在 (x, y) -
drawImage(img, x, y, width, height)：缩放绘制，强制拉伸/压缩到指定宽高 -
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)：先从原图裁切一块（sx,sy 开始，宽 sw 高 sh），再缩放到 (dw,dh) 并绘制到画布 (dx,dy) 位置
注意跨域与“污染画布”问题
如果图片来自不同域名（比如 CDN 或第三方接口），Canvas 会因安全策略被标记为“污染”，之后调用 getImageData() 或 toDataURL() 就会报错：
- 解决办法一：图片服务器响应头加上
Access-Control-Allow-Origin: * - 解决办法二：给
img元素加crossOrigin="anonymous"属性（前提是服务端支持 CORS） - 不涉及像素读取时（只显示、不处理），可忽略此问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
