使用image.onload将多个图像绘制到画布 [英] Drawing multiple images to a canvas using image.onload

问题描述

当尝试在画布上绘制大量2D图像时遇到问题。使用单独的程序，我采取一个大的图像文件，并打破较小，均匀的件。我使用2D数组来表示图像的网格，理想情况下，当我分配网格中每个元素的src时，该图像将被绘制到其在画布上的适当点。但是，我的代码不工作。

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

我试过在Opera， Chrome和Safari。 onload事件根本不会在Opera，Chrome和Safari中触发（我在onload函数中放置了一个警报，但它从未出现过）。在Firefox中，只有第一个图像（grid [0] [0]）的onload事件触发。但是，我注意到，如果我设置了一个警报，当我设置当前元素的src，每个onload事件在Firefox中被触发，整个图像绘制。理想情况下，我希望这在所有4个浏览器（我认为IE不工作，因为它不支持Canvases），但我只是不知道发生了什么。任何帮助/输入感谢，谢谢！

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, thanks!

推荐答案

我认为问题是你没有得到你的变量到一个闭包。更改此行：

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

至

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

并且您将看到是您的警报在每次调用中返回相同的row和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);
    }
}

然后执行：

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

此示例页面适用于Firefox和Chrome。

This example page works for me in Firefox and Chrome.

这篇关于使用image.onload将多个图像绘制到画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！