javascript - Drawing multiple images to a canvas using image.onload - Stack Overflow

admin管理员组

文章数量:1278918

I am running into problems when trying to draw a large 2D array of images onto a canvas. Using a separate program, I'm taking one big image file and breaking it up smaller, uniform pieces. I'm using the 2D array to represent this "grid" of images, and ideally when I assign the src of each element in the grid, that image would be drawn to its proper point on the canvas once its ready. However, my code isn't working.

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

I have tried running this code in Opera, Firefox, Chrome, and Safari. The onload events don't fire at all in Opera, Chrome, and Safari (I placed an alert inside the onload function, it never came up). In Firefox, only the FIRST image (grid[0][0])'s onload event fired. However, I noticed that if I placed an alert right AFTER I set the src of the current element, every onload event in Firefox gets triggered, and the entire image is drawn. Ideally I would like this to work in all 4 browsers (I assume IE wont work because it doesn't support Canvases), but I just don't know what is going on. Any help/input is appreciated.

I am running into problems when trying to draw a large 2D array of images onto a canvas. Using a separate program, I'm taking one big image file and breaking it up smaller, uniform pieces. I'm using the 2D array to represent this "grid" of images, and ideally when I assign the src of each element in the grid, that image would be drawn to its proper point on the canvas once its ready. However, my code isn't working.

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

I have tried running this code in Opera, Firefox, Chrome, and Safari. The onload events don't fire at all in Opera, Chrome, and Safari (I placed an alert inside the onload function, it never came up). In Firefox, only the FIRST image (grid[0][0])'s onload event fired. However, I noticed that if I placed an alert right AFTER I set the src of the current element, every onload event in Firefox gets triggered, and the entire image is drawn. Ideally I would like this to work in all 4 browsers (I assume IE wont work because it doesn't support Canvases), but I just don't know what is going on. Any help/input is appreciated.

• javascript
• html
• canvas
• dom-events
• onload

Share Improve this question Follow edited Feb 11, 2020 at 18:17 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 15, 2010 at 18:56 KazKaz 14311 silver badge99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

I think the problem is that you're not getting your variables into a closure. Change this line:

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

To

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

And what you'll see is that your alerts are returning the same value for row and col on each call. You need to get these variables wrapped in a closure so that your function deals with the values and not the references:

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

Then do:

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

This example page works for me in Firefox and Chrome.

本文标签： javascriptDrawing multiple images to a canvas using imageonloadStack Overflow