image.onload를 사용하여 캔버스에 여러 이미지 그리기

Question

큰 2D 이미지 배열을 캔버스에 그릴 때 문제가 발생합니다. 별도의 프로그램을 사용하여 하나의 큰 이미지 파일을 가져와 작고 균일 한 부분으로 나눕니다. 2D 배열을 사용하여이 "그리드"이미지를 표현하고, 이상적으로 그리드의 각 요소의 src를 할당하면 해당 이미지는 준비가 완료되면 캔버스의 적절한 지점에 그려집니다. 그러나, 내 코드가 작동하지 않습니다.

var grid = new Array() 
/*grid is set to be a 2D array of 'totalRows' rows and 'totalCols' columns*/ 

/*In the following code, pieceWidth and pieceHeight are the respective height/widths 
of each of the smaller 'pieces' of the main image. X and Y are the coordinates on 
the canvas that each image will be drawn at. All of the images are located in the 
same directory (The src's are set to http://localhost/etc), and each individual 
filename is in the form of name(row*totalRows + col).png, ex, traversing the 2D 
array left to right top to bottom would give image1.png, image2.png, etc*/ 

for (var row = 0; row < totalRows; row++) 
    { 
     for (var col = 0; col < totalCols; col++) 
     { 
      grid[row][col] = new Image(); 
      var x = col * pieceWidth; 
      var y = row * pieceHeight; 
      grid[row][col].onload = function() {ctx.drawImage(grid[row][col], x, y);}; 
      grid[row][col].src = "oldimagename" + ((row * totalRows) + col) + ".png"; 
     } 
    } 

오페라, 파이어 폭스, 크롬 및 사파리에서이 코드를 실행 해 보았습니다. onload 이벤트는 Opera, Chrome 및 Safari에서 전혀 실행되지 않습니다 (onload 함수 내부에 경고를 했으므로 결코 발생하지 않았습니다). Firefox에서는 FIRST 이미지 (grid [0] [0])의 onload 이벤트 만 실행됩니다. 그러나 현재 요소의 src를 설정 한 후 경고를 표시하면 Firefox의 모든 onload 이벤트가 트리거되고 전체 이미지가 그려지는 것으로 나타났습니다. 이상적으로이 모든 4 브라우저에서 작동하도록 싶습니다 (canvases 지원하지 않기 때문에 IE 실 거예요 가정합니다),하지만 난 그냥 무슨 일이 일어나고 있는지 몰라. 모든 도움/의견을 주셔서 감사합니다, 감사합니다!

Answer 1

문제는 폐쇄 변수에 변수가 표시되지 않는다고 생각합니다. 이 줄을 변경 :

grid[row][col].onload = function() {ctx.drawImage(grid[row][col], x, y);}; 

grid[row][col].onload = function() {window.alert('row:' + row + ' col:' + col);}; 

그리고 what you'll see

에 당신의 경고는 각 호출에 행 안부에 대해 동일한 값을 반환하는 것입니다. 당신은 값이 아니라 함께 참조를이 variables wrapped in a closure 있도록 기능 거래를 얻을해야합니다

var drawCanvasImage = function(ctx,grid,row,col,x,y) { 
    return function() { 
     ctx.drawImage(grid[row][col], x, y); 
    } 
} 

는 다음을 수행하십시오 파이어 폭스와 크롬에서 나를 위해

grid[row][col].onload = drawCanvasImage(ctx,grid,row,col,x,y); 

This example page 작품.