獲取有關帆布

若干不同圖像的幾個圖像數據，我想提請在畫布上的一些圖像，並使用循環得到他們的數據... 我把圖像對象數組中，也是數據應該是陣列也是。下面是代碼。獲取有關帆布

，我應該怎麼做，如果我想獲得多個圖像數據的陣列？

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

來源

2012-08-12 user1505537

「的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-12 09:16:29

ü應該必須添加監聽器在畫布上：

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-12 09:21:32

獲取有關帆布

回答

相關問題