캔버스 이미지가 그림이 아니십니까?

Question

두 개의 이미지를로드하는 데 사용하는 코드입니다 (하나의 이미지는 7MB입니다. 나중에 알 수 있습니다).

var loaded = 0; 
var img1 = new Image(); 
var img2 = new Image(); 
img1.onload = function(){ both() }; 
img2.onload = function(){ both() }; 
img1.src = 'map.png'; 
img2.src = 'ovl.png'; 

function both() { 
    loaded++ 
    console.log(loaded); 
    if (loaded == 2) { 
     console.log("LOADED"); 
     resizeCanvas(); 
     console.log("RESIZED"); 
    } 
} 

function resizeCanvas() { 
    //resize code 
    drawStuff(); 
} 
function drawStuff() { 
    console.log("DRAWSTART"); 
    ctx.save(); 
    ctx.setTransform(1,0,0,1,0,0); 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.fillStyle="#868f9c"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
    ctx.restore(); 
    ctx.drawImage(img1, 0,0); 
    ctx.drawImage(img2, 0,0); 
    console.log("DRAWED"); 
} 

예상대로 콘솔 출력은;

(index):28 1 
(index):28 2 
(index):30 LOADED 
(index):81 DRAWSTART 
(index):90 DRAWEND 
(index):64 RESIZED 

하지만 대부분의 경우 이미지를 찾을 수 없습니다. 때로는 ~ 30 초 후에 표시되지만 다른 기능은 작동하지 않습니다 (일부 팬/확대/축소 기능도 있습니다).

ctx.drawImage(img[1,2], 0,0); 중 하나를 주석 처리하면 완벽하게 작동합니다. 두 개의 이미지를 그리는 것만으로는 효과가없는 것 같습니다 ...

Answer 1

모든 것을 확인하기 위해 먼저 작은 이미지로 테스트해야합니다. 큰 이미지를 관리하기 위해, 예고 라이브러리를 사용할 수 있습니다. http://www.createjs.com/preloadjs