1

これは説明するのが奇妙かもしれません。単一の画像を持つキャンバスのコレクションを動的に作成したいと考えています。そして、これは（多くの面倒と onload イベントを取り除いた後）表示されますが、ページを更新しようとすると、画面に何も表示されないことがあります。そして、(画像が読み込まれるまで待機するために) onload イベントを使用していたとき、最後のキャンバスにすべてが表示されなかったり、表示されたりしませんでした。

コードのスニペットを次に示します。

var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
    img =  new Image()
    img.src = sources[i]
    canvas  = document.createElement('canvas')
    $(canvas).attr('id', i)
    canvas.height=300
    canvas.width=200
    var context = canvas.getContext('2d');
    //onload commented out allows expected display
    //img.onload = function() {
    context.drawImage(img, 0, 0);
    //} 
    divCanvas.appendChild(canvas)
}

私のように見える多くの投稿を見て、かなりの数を試しましたが、役に立ちませんでした.

4

3 に答える 3

2

問題は、 img.onload イベントがトリガーされる前に var コンテキストが上書きされることだと思います。img.onload イベントには、グローバル スコープへの参照しかありません。これが、最後の画像のみが表示される理由です。イベント内で正しいコンテキストを見つける必要があります。

コードを直接テストすることはできませんが、次のようにする必要があると思います。

var sources = []//the array that contains the images
var divCanvas = document.getElementById('showcase-wrapper')
for(var i=0; i<sources.length; i++){
    img =  new Image();
    img.src = sources[i];
    img.id = i; //Allow img to remember its corresponding canvas/context
    canvas  = document.createElement('canvas');
    $(canvas).attr('id', i);
    canvas.height=300;
    canvas.width=200;
    var context = canvas.getContext('2d');
    divCanvas.appendChild(canvas);

    img.onload = function() {
        //Use the image id to get the correct context
        var canvas = document.getElementById(this.id);
        var context = canvas.getContext('2d');
        context.drawImage(this, 0, 0);
    } 
}
于 2012-02-04T00:51:20.553 に答える
1

ここで修正を見つけました：

https://developer.mozilla.org/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Drawing_images

どうやら、ボディのロードが完了したときに関数が呼び出されるように img.onload を削除したようです。ただし、スクリプトまたは ellisbben ソリューションが機能しなかった理由はまだわかりません。

誰かがそれに対する答えとしてあれば、それは大歓迎です...

于 2012-02-03T10:49:11.700 に答える
1

一貫した動作のために、 を使用する必要がありますonload。そうしないと、イメージが読み込まれる前にキャンバスの描画コードが実行され、目的のイメージが描画されません。

イベントが発生する前に がガベージ コレクションされているonloadため、他のキャンバスに描画する が呼び出されていない可能性があります。Image

追加してみる

var images = [];

コードの開始時と

  images.push(img);

ラインの後img = new Image()。

それがうまくいかない場合は、それらの画像を DOM ツリーに追加してみてください。img.setAttribute('style', 'display: none')まず、画像が表示されないようにし、ドキュメント構造に干渉しないようにします。

于 2012-01-31T16:13:50.497 に答える