如何訪問/更改JavaScript圖像對象中的像素？

Question

我正在將圖像繪製到畫布上以供在網頁上顯示。我有兩個圖像副本。第一個是原始或基礎事實，第二個是將應用各種圖像處理算法的副本。

如何將地面實況圖像中的像素複製到副本，以及如何在複製副本時訪問副本中的像素以處理圖像？

Examples I've seen到目前爲止，所有這些操作都涉及訪問和操作畫布對象而不是圖像數據。這是推薦的解決方案嗎？將原始圖像繪製到畫布上，然後處理畫布？

Answer 1

要獲取圖像數據，請使用canvas上下文的getImageData（）方法，然後從數據屬性中訪問像素數據。數據屬性中的每個像素都包含紅色，綠色，藍色和Alpha通道。所以，如果你沒有畫到畫布上你的形象，你可以再做

var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight); 
var data = imageData.data; 

然後，你可以從X挑出特定的像素數據和y座標，像這樣

// pick out pixel data from x, y coordinate 
var x = 20; 
var y = 20; 
var red = data[((imageWidth * y) + x) * 4]; 
var green = data[((imageWidth * y) + x) * 4 + 1]; 
var blue = data[((imageWidth * y) + x) * 4 + 2]; 
var alpha = data[((imageWidth * y) + x) * 4 + 3]; 

你可以找到更多的信息如何使用畫布對圖像數據進行處理here。

希望有所幫助。