0

我想在画布中绘制一些图像并使用 for 循环获取它们的数据......我将图像对象放在数组中，并且数据也应该在数组中。这是代码。

如果我想获取几个图像数据的数组，我该怎么办？

window.onload = function(){
 var canvas = document.getElementById("Canvas");
 var context = canvas.getContext('2d');
 for(var i = 0; i < 10; i++)
 {
  imgObj[i]= new Image();
  imgObj[i].onload = function()
  {
   context.drawImage(imgObj[i], 0, 0);
   var imagedata1 = context.getImageData(0,0,742, 274);
   data[i] = imagedata1.data;
  };
  imgObj[i].src = "/img"+i+".bmp";
 }
};
4

2 回答 2

1

“getImageData() 方法返回一个 ImageData 对象，该对象复制画布上指定矩形的像素数据。

提示：ImageData 对象不是图片，它指定画布上的一个部分（矩形），并保存该矩形内每个像素的信息。”（来源：http ://www.w3schools.com/html5/canvas_getimagedata.asp )

因此尝试将图片一张一张地添加到画布中，每次都取回与图片的位置和大小对应的图片数据矩形；

http://s11.postimage.org/aszz0oxc3/canvas.png

在第 2 步中，您检索绿色图像的图像数据，在第 3 步中，您检索蓝色图像的图像数据，即使您仍然有绿色图像，您也要执行此操作。

因此，这是您需要更换的：

imagedata[i] = context.getImageData(image[i].x,image[i].y,image[i].width, image[i].height);

这需要在画布上添加每个图像后完成。

于 2012-08-12T09:16:29.450 回答
0

你应该在画布中添加监听器：

function eventShipLoaded() {

            ctx.drawImage(img, 50, 50, 118,100);    //draw image in canvas  

            ctx.drawImage(img, 487, 180, 118,100);      
        }
window.addEventListener('load', eventShipLoaded , false);
var img = new Image();
        img.addEventListener('load', eventShipLoaded , false);
        img.src = "pic.jpg";
于 2012-08-12T09:21:32.397 回答