context.drawImage（）不适用于新的Image（）实例（chrome）

Question

我试图弄清楚为什么在画布中绘制之前经典的图像预加载方式会在chrome上触发“类型错误”。

让我们看看情况：

我尝试以3种不同的方式预装图像：

1. 创建新的Image（）实例
2. 创建图像元素
3. 创建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时，我只有一个Type错误。

我在我公司的Windows上使用谷歌浏览器27.0.1453.94，在Mac OS X上使用谷歌浏览器27.0.1453.93，两者都是x64平台。

此代码在Firefox中运行良好，甚至IE9 （我不是在开玩笑，我发誓）

有人知道Chrome中的这个Image（）类问题吗？

编辑：这是一个错误的屏幕：

您可以按实际尺寸here观看。

这不是一个大问题，无论如何我会使用jQuery方式，但我真的好奇看看是什么原因，为什么我会失去一些时间来修复它！

我看了一下bug。

我还在问，因为我不确定它是一样的吗？！

Answer 1

令我感到痛苦的是，这有效，我没有更好的答案，但在打开和关闭所有扩展，尝试测试版和开发频道后，最终工作的是重新启动计算机。现在drawImage工作得很好。 ：（

Answer 2

这不是一个解决方案，因为这是一个Chrome错误。但这是跟踪器上的相关Chrome错误。这是一个已知问题，应该修复 - 希望 - 不久的将来：https://code.google.com/p/chromium/issues/detail?id=238071

在此期间，请使用document.createElement("img")代替new Image()。