Canvas drawImage()不起作用。

Question

这段 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（）无法正常工作。 为了找到问题，我应该检查什么？

- Joe

---

你为什么认为取消注释会导致问题？ - Joe

Answer 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;
}

查看这个可工作的演示

- letiagoalves

---

如果图像在绑定 onload 之前已经加载，这个方法还能起作用吗？ - sabithpocker

@sabithpocker，我更新了我的答案以检查它是否已经加载。现在它可以在两种情况下工作。 - letiagoalves

我已经从img.onload = function() { ... }调用了代码。 - Joe

@Joe 你是什么意思？ - letiagoalves

我的意思是问题发生在回调函数内部。 - Joe

@Joe 看看这个演示：http://jsfiddle.net/mf4SW/。使用相同的登录信息，告诉我它的运行情况。还要记得这个检查：`if(!image) image = this;` - letiagoalves

Answer 2

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

尝试将变量命名为其他名称。同时确保已加载某些图像。

请尝试我的示例 http://jsfiddle.net/aliasm2k/tAum2/ 获取更多灵感。

- user2672373

Answer 3

图片的宽度和高度属性在图片加载完成之前是未设置的，因此我建议您将代码放在onLoad()图片事件中。

- Arnau Lacambra