html5キャンバス画像が表示されない、または画像が読み込まれない

Question

私は著作権の理由でリンクを削除します！..申し訳ありません！あなたがFirefoxである場合

、左（すべてのモックアップ）のイメージがロードされ、いくつかのリフレッシュ後、クロムやサファリでは、私はそれがメモリの問題にロードされていない画像だと思う

を表示しませんしかし、私は画像がすべてロードされていることを知ることはできませんが、最後にスクリプトを入れますが、運はありません。

質問は、画像をロードするために何をすべきでしょうか？ JavaScriptコード？

n.b. キャンバスディスプレイ用のベース64としてイメージをエンコードするのは難しいです...そうすることは可能でしょうか知的ですか？

Answer 1

実際には、すべての画像の読み込みが完了した時点を判断できます。これを行うには、イメージオブジェクトのonloadプロパティのコールバック関数を指定する必要があります。だから、あなたは（あなたがすでにcanvas.jsで持っているコードに加えて）このようなものに終わるだろう：

var loaded_images = 0; 
var image_objects = []; 

// This is called once all the images have finished loading. 
function drawOnCanvas() { 
    for (var i = 0; i < image_objects.length; ++i) { 
     ctx.drawImage(image_objects[i], 0, 0); 
    } 
} 

function handleLoadedImage() { 
    ++loaded_images; 

    // Check to see if all the images have loaded. 
    if (loaded_images == 7) { 
     drawOnCanvas(); 
    } 
} 

document.ready = function() { 
    for (var i=0;i<myimages.length;i++) { 
     var tempimage = new Image(); 
     tempimage.src= myimages[i]; 
     tempimage.onload = handleLoadedImage; 
     image_objects[i] = tempimage; 
    } 
} 

キーコンセプトはあなたがロードを完了した画像の数を追跡していることです。すべての画像が読み込まれたら、キャンバスに描画することができます。