Question

我想在画布中绘制一些图像并使用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";
 }
};

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

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

Answer 2

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

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

使用画布获取有关几个不同图像的多个图像数据

2 个答案: