4

私が書いているアプリケーションには、データベースから base64 でエンコードされた複数の画像を読み込み、それらを JavaScript 配列内に配置するページがあります。これは EJS テンプレートを介してサーバー上で発生しているため、ユーザーが HTML ページを受信すると、base64 でエンコードされた画像が表示されます (これを確認しました)。

次のステップでは、クライアント側で JavaScript を使用してキャンバスをループし、各キャンバスに対応する画像データを入力します。しかし、私は奇妙な振る舞いをしています。毎回、最後のキャンバスだけが塗りつぶされます。

for (var i = 1; i < 13; i++) {
    var ctx = document.getElementById('canvas-' + i).getContext('2d'),
        image = new Image();

    image.onload = function() {
        ctx.drawImage(image, 0, 0);
    }
    image.src = images[(i - 1)];
}

images 配列は、このコードのすぐ上 (同じスコープ内) で定義されています。このようなコードを実行すると、最後のキャンバス (id 'canvas-12') だけが塗りつぶされます。for ループの終了条件をたとえば i < 11 に下げると、id が「canvas-10」のキャンバスのみが塗りつぶされます。

足りないものはありますか？

4

1 に答える 1

12

閉鎖の問題のようです。ループするたびctxに、関数に含まれるオブジェクトを変更していonloadます。クロージャーを使用して、ループ中にオブジェクトを更新していないことを確認する必要があります。

for (var i = 1; i < 13; i++) {
    var ctx = document.getElementById('canvas-' + i).getContext('2d'),
        image = new Image();
    (function(ctx, image) {
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
        }
        image.src = images[(i - 1)];
    })(ctx, image);
}

注: 私はこれをテストしていません。

于 2012-12-18T21:34:38.113 に答える