HTML中canvas如何加载和绘制图片-html教程-PHP中文网

drawImage()图片不显示主因是参数顺序错误或图像未加载完成：①参数必须以图像对象开头，如ctx.drawImage(img,x,y)；②必须监听img.onload事件并在回调中绘制，否则因异步加载导致naturalWidth为0而静默失败。

html中canvas如何加载和绘制图片

drawImage() 参数顺序写错，图片直接不显示

最常见的“画不出来”不是代码漏了，是 drawImage() 参数放反了。比如写成 ctx.drawImage(0, 0, img) —— 这会报错或静默失败，因为第一个参数必须是图像对象。正确顺序永远是图像在前，坐标/尺寸在后。

三套签名要分清：

drawImage(img, x, y)：原图大小，左上角落在 (x, y)
drawImage(img, x, y, width, height)：缩放绘制，width/height 是目标区域尺寸
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)：先从源图裁剪 (sx,sy,sw,sh)，再贴到目标位置并缩放到 (dw,dh)

用错一套，轻则偏移、失真，重则整张图消失。尤其第三套，9个参数极易数错位置，建议拆成变量命名再传入。

图片还没加载完就 drawImage()，画布一片空白

这是最隐蔽也最高频的问题：img.src = 'xxx.png' 是异步的，赋值完立刻调 drawImage()，此时 img.naturalWidth 很可能是 0，canvas 什么也不会画，控制台还不报错。

必须等 onload 触发后再绘制：

onload 必须在设置 src 之前绑定，否则可能错过事件（尤其是缓存命中时）
不要用 img.complete 判断——它只反映是否已缓存，不保证解码完成
如果图片来自用户上传（File 或 URL.createObjectURL()），同样适用该规则

正确写法示例：

const img = new Image();
img.onload = () => {
  ctx.drawImage(img, 0, 0);
};
img.src = 'avatar.jpg'; // src 放最后

跨域图片被污染，drawImage() 后 canvas 不可读取

当 img.src 指向其他域名的图片（比如 CDN 链接），且你后续要用 ctx.getImageData() 或导出为 toDataURL()，就会触发“canvas 被污染”错误：SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

解决办法分两端：

前端：给 Image 对象加 crossOrigin 属性，如 img.crossOrigin = 'anonymous'
服务端：图片资源响应头必须包含 Access-Control-Allow-Origin: *（或指定域名）
注意：crossOrigin 必须在 src 赋值前设置，否则无效

drawImage() 画出来但位置/尺寸不对，检查坐标系和 canvas 像素比

Canvas 的绘图坐标基于 CSS 像素，但实际渲染分辨率由 canvas.width/canvas.height 决定。如果只用 CSS 缩放 canvas 元素（比如 style="width:300px;height:200px"），而没同步改 width/height 属性，图片就会被拉伸或压缩。

典型表现：