context.drawImage() 不适用于新的 Image() 实例（chrome）答案

【问题标题】：context.drawImage() doesn't work with new Image() instance (chrome)context.drawImage() 不适用于新的 Image() 实例（chrome）
【发布时间】：2013-05-24 10:38:45
【问题描述】：

我试图弄清楚为什么在画布上绘图之前预加载图像的经典方式会在 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 27）
嗯，奇怪，你们能告诉我你们在哪个平台上工作吗？
无法在 Ubuntu 12.04 上的 Chromium 25 和 Chrome 29 (dev) 上重现您的问题。你确定这不是某种缓存问题吗？
是的，绝对确定！
无法在 Win 7 (x64) 下的 Chrome 27.0.1453.94 上重现。也许某个实用程序或安全程序正在干扰 Chrome？

标签： javascript image google-chrome canvas preloading

【解决方案1】：

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

同时，请使用document.createElement("img") 而不是new Image()。

【讨论】：

是的，我之前看到过这个问题，请观看我的问题中的“错误”链接 :) 最后我使用 jQuery 中的 $('') ！
我有一个问题是图像没有加载，但是onload事件还是触发了，所以没有绘制图像并发生错误。
奇怪的是，你的图像本身会不会被二进制损坏？

【解决方案2】：

这让我很痛苦，但我没有更好的答案，但是在打开和关闭所有扩展、尝试 beta 和 dev 频道之后，最终奏效的是重新启动我的计算机。现在 drawImage 工作得很好。 :(

【讨论】：