context.drawImage()不适用于新图像()实例(chrome)
context.drawImage()不适用于新图像()实例(chrome)
提问于 2013-05-29 08:46:42
我试图弄清楚为什么在画布中绘制之前的图像预加载的经典方法是在铬上触发一个“类型错误”。
让我们看看情况：
我尝试以三种不同的方式预加载图像：
- 创建一个新的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);请在这里看小提琴。
对于第一个loadImage调用，我只有一个类型错误。
我的公司在Windows上使用谷歌Chrome 27.0.1453.94，在Mac上使用Google 27.0.1453.93，这两个平台都是x64平台。
这段代码在火狐，，甚至IE9中运行得很好(我不是开玩笑，我发誓)
有人知道Chrome中的Image()类问题吗？
编辑:下面是bug的屏幕：
你可以在真实尺寸的这里上看到它。
这不是什么大问题，无论如何，我会使用jQuery的方式，但我真的很好奇是什么原因，以及为什么我浪费了一些时间来修复它！
我看了一下这个错误。
我还在问，因为我不确定它是一样的?！
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-04 18:22:22
这并不是一个解决方案，因为这是一个Chrome缺陷。但这是与他们的追踪器相关的Chrome缺陷。这是一个已知的问题，应该在不久的将来修复：https://code.google.com/p/chromium/issues/detail?id=238071。
同时，使用document.createElement("img")而不是new Image()。
Stack Overflow用户
发布于 2013-05-29 19:32:42
这让我很痛苦，我没有更好的答案，但是在打开和关闭所有扩展之后，尝试beta和dev通道，最终起作用的是重新启动我的计算机。现在，drawImage工作得很好。:(
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16809317
复制相关文章
相似问题
腾讯云开发者
