html5 캔버스 이미지가 표시되지 않거나 이미지가로드되지 않습니다.

Question

저작권상의 이유로 링크를 제거합니다! .. 죄송합니다!

파이어 폭스에있을 때, 왼쪽 (모든 모형)의 이미지는 나는 그것이 메모리 문제에로드되지 않은 이미지 생각 크롬 및 사파리에서, 그것은 결코

을 표시하지, 몇 새로 고침 후,로드 ,하지만 이미지가 모두로드 될 때 나는 알지 못한다. 끝에서 스크립트를 넣는다.하지만 운은 없다.

그래서 질문을 던지려면 이미지가로드되어야한다. 자바 스크립트 코드?

n.b. 캔버스 디스플레이 용 base64로 이미지를 인코딩하는 데 어려움이 있습니다 ... 그렇게하는 것이 가능하거나 지능적입니까?

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; 
    } 
} 

의 핵심 개념은 당신이로드를 완료 한 이미지의 수를 추적하는 것입니다. 모든 이미지가로드되면 캔버스에 그릴 수 있음을 알 수 있습니다.