5

我试图弄清楚为什么在画布上绘制之前图像预加载的经典方式会在 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);

请在这里观看小提琴。

我只有第一个 loadImage 调用的类型错误。

我在公司的 Windows 上使用 Google Chrome 27.0.1453.94，在 Mac OS X 上使用 Google Chrome 27.0.1453.93，这两个都是 x64 平台。

这段代码在 Firefox甚至 IE9中都能正常工作（我不是在开玩笑，我发誓）

有人知道 Chrome 中的这个 Image() 类问题吗？

编辑：这是错误的屏幕： Chrome - 图像错误

您可以在此处以实际尺寸观看。

这不是什么大问题，反正我会用jQuery的方式，但是我真的很好奇是什么原因，为什么我浪费了一些时间来修复它！

我看了看这个错误。

我仍然在问，因为我不确定它是否相同？！

4

2 回答 2

1

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

同时，使用document.createElement("img")代替new Image().

于 2013-06-04T18:22:22.263 回答
1

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

于 2013-05-29T19:32:42.727 回答