context.getImageData 簡介

Html5 Canvas 使你能夠獲取和更改畫布上任何畫素的顏色。

你可以使用 Canvas 的畫素操作來：

• 為影象建立顏色選擇器或在色輪上選擇顏色。
• 建立複雜的影象濾鏡，如模糊和邊緣檢測。
• 在畫素級別重新著色影象的任何部分（如果使用 HSL，你甚至可以在保留重要的光照和飽和度的同時重新著色影象，因此結果看起來不像是某人在影象上拍了一些油漆）。注意：Canvas 現在具有 Blend Compositing，在某些情況下也可以重新著色影象。
• 敲除影象中某個人/專案周圍的背景，
• 建立一個油漆桶工具來檢測和填充影象的一部分（例如，將使用者點選的花瓣的顏色從綠色更改為黃色）。
• 檢查影象的內容（例如，面部識別）。

常見問題：

• 出於安全原因，如果你繪製的影象源自與網頁本身不同的域，則禁用 getImageData。
• getImageData 是一種相對昂貴的方法，因為它建立了一個大的畫素資料陣列，因為它不使用 GPU 來協助它的工作。注意：Canvas 現在具有混合合成，可以執行與 getImageData 相同的畫素操作。
• 對於 .png 影象，getImageData 可能不會報告與原始 .png 檔案完全相同的顏色，因為在畫布上繪製影象時允許瀏覽器進行伽馬校正和 alpha 預複製。

獲得畫素顏色

使用 getImageData 獲取全部或部分畫布內容的畫素顏色。

getImageData 方法返回 imageData 物件

imageData 物件具有包含畫素顏色資訊的 .data 屬性。

data 屬性是 Uint8ClampedArray，包含所有請求畫素的紅色，綠色，藍色和 Alpha（不透明度）顏色資料。

// determine which pixels to fetch (this fetches all pixels on the canvas)
var x=0;
var y=0;
var width=canvas.width;
var height=canvas.height;

// Fetch the imageData object 
var imageData = context.getImageData(x,y,width,height);

// Pull the pixel color data array from the imageData object
var pixelDataArray = imageData.data;

你可以在 data 陣列中獲取任何[x，y]畫素的位置，如下所示：

// the data[] array position for pixel [x,y]
var n = y * canvas.width + x;

然後你可以像這樣獲取該畫素的紅色，綠色，藍色和 alpha 值：

// the RGBA info for pixel [x,y]
var red=data[n];
var green=data[n+1];
var blue=data[n+2];
var alpha=data[n+3];

顯示畫素資料陣列的結構的插圖

context.getImageData 如下圖所示，適用於 2x3 畫素大小的小畫布：