5

キャンバスに描画する前に画像をプリロードする従来の方法がクロムで「タイプエラー」を発生させる理由を理解しようとしています。

状況を見てみましょう:

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 呼び出しで Type エラーしかありません。

会社の 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