我想弄清楚为什么在 canvas 中绘图之前预加载图像的经典方法会在 chrome 上引发“类型错误”。
让我们看看情况:
我尝试以 3 种不同的方式预加载图像:
- 创建一个新的 Image() 实例
- 创建图像元素
- 创建一个 jQuery 图像对象
或者如果您更喜欢一些代码:
var canvas1 = document.getElementById('canvas-1'),
context1 = canvas1.getContext('2d'),
image1 = new Image(),
canvas2 = document.getElementById('canvas-2'),
context2 = canvas2.getContext('2d'),
image2 = document.createElement('img'),
$canvas3 = $('#canvas-3'),
context3 = $canvas3.get(0).getContext('2d'),
$image3 = $('<img>'),
loadImage = function (image, context, debugIndice) {
debugIndice = debugIndice || -1;
image.onload = function () {
try {
context.drawImage(this, 0, 0, 100, 100);
}
catch (e) {
console.log('error for debugIndice', debugIndice, e, this);
}
}
image.src = "http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png";
};
loadImage(image1, context1, 1);
loadImage(image2, context2, 2);
loadImage($image3.get(0), context3, 3);
请收看Fiddle在这里。
我只有第一个 loadImage 调用的类型错误。
我在公司的 Windows 上使用 Google Chrome 27.0.1453.94,在 Mac OS X 上使用 Google Chrome 27.0.1453.93,这两个都是 x64 平台。
此代码在 Firefox、甚至 IE9 中运行良好(我不是在开玩笑,我发誓)
有人知道 Chrome 中的这个 Image() 类问题吗?
编辑:这是错误的屏幕:
您可以按实际大小观看here .
这不是什么大问题,反正我会使用 jQuery 方式,但我真的很想知道是什么原因,为什么我浪费了一些时间来修复它!
我看了一下这个bug .
我还在问,因为我不确定它是否相同?!
最佳答案
这不完全是解决方案,因为这是一个 Chrome 错误。但这是他们跟踪器上的相关 Chrome 错误。这是一个已知问题,应该在不久的将来得到修复:https://code.google.com/p/chromium/issues/detail?id=238071
同时,使用 document.createElement("img")
代替 new Image()
。
关于javascript - context.drawImage() 不适用于新的 Image() 实例(chrome),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16809317/