画布drawImage（）不起作用答案

【问题标题】：Canvas drawImage() not working画布drawImage（）不起作用
【发布时间】：2013-09-17 22:16:12
【问题描述】：

这段 Javascript 代码在画布上绘制了部分图像：

var img = document.getElementById('img');
var canvas = document.getElementById('can');
//canvas.width = img.width;
//canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

但是当我取消注释中间线以设置画布宽度和高度时，drawImage() 不起作用。我应该检查什么才能发现问题？

【问题讨论】：

为什么你认为取消注释会产生问题？

标签： javascript html canvas

【解决方案1】：

您需要等待浏览器加载图片。

如果图像尚未加载，请使用 onload 事件并将您的代码更改为以下内容：

var img = document.getElementById('img');
var canvas = document.getElementById('can');
var ctx = canvas.getContext("2d");

var callback = function(image) {
   if(!image) image = this;
   canvas.width = img.width;
   canvas.height = img.height;
   ctx.drawImage(image, 0, 0);
}

if(img.complete) { //check if image was already loaded by the browser
   callback(img);
}else {
   img.onload = callback;
}

See this working demo

【讨论】：

如果在绑定 onload 之前已经加载了图像，这将起作用
@sabithpocker 我更新了我的答案以检查它是否已经加载。现在它适用于两种情况。
我已经从 img.onload = function() { ... } 中调用了代码
@Joe 你是什么意思？
我的意思是问题发生在回调内部

【解决方案2】：

var img = document.getElementById('img');

尝试将变量命名为其他名称。还要确保加载了一些图像。

试试我的小提琴http://jsfiddle.net/aliasm2k/tAum2/ 以获得更多想法

【讨论】：

【解决方案3】：

图像的宽度和高度属性在图像加载之前不会设置，因此我建议您将代码放入 onLoad() 图像事件中。

【讨论】：