イメージ要素からキャンバス要素を動的に作成

Question

私はページ上のすべてのimgタグをループし、各imgのキャンバス要素を動的に作成しようとしています（JavaScriptでピクセル値を変更できます）。しかし、私のコードは現在、私のキャンバスをページに追加していますが、空白のままです。 drawImage（）関数を使用しているかどうか、コードの構造に大きな問題があるのか​​、それとも何か他のものがあるのか​​どうかはわかりません。

var images = [], canvas = [], context = []; 

function init() { 
    var images = document.getElementsByTagName('img'); 

    // Create a canvas for each image... 
    for(var i = 0; i < images.length; i++) { 
    canvas[i] = document.createElement('canvas'); 
    context[i] = canvas[i].getContext('2d'); 
    context[i].drawImage(images[i], 0, 0); 
    document.body.appendChild(canvas[i]); 
    } 
} 

document.addEventListener('DOMContentLoaded', init); 

Answer 1

あなたはここで読むことができたよう：https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded

DOMContentLoadedイベントが最初のHTMLドキュメントが完全にロードされ、解析されたときにスタイルシート、画像を待たずに、解雇され、サブフレームのロードが終了します。

アンロードされたイメージをペイントしています。ページ全体が読み込まれるまで待つか、イメージが読み込まれたときにキャンバスを描画する各イメージにイベントリスナーを追加する必要があります。私は2番目に行くつもりですので、代わりにすべてのスタイルシートとすべてが読み込まれた後で、イメージが即座に作成されます。

var images = [], canvas = [], context = []; 

function init() { 
    var images = document.getElementsByTagName('img'); 

    // Create a canvas for each image... 
    for(var i = 0; i < images.length; i++) { 
    images[i].addEventListener("load", (function(i) { 
     canvas[i] = document.createElement('canvas'); 
     context[i] = canvas[i].getContext('2d'); 
     context[i].drawImage(images[i], 0, 0); 
     document.body.appendChild(canvas[i]); 
    }).bind(null, i)); // Bind to contextualize the variable so don't changes before the event is called because of the loop. As others may think, `i` is not overwritten by the event parameter, so this bind is safe. 
    } 
} 

document.addEventListener('DOMContentLoaded', init);