閱讀圖像像素

Question

是否可以讀取畫布A中圖像的像素並在畫布B上創建像素？我只想在圖像的像素爲綠色的情況下在畫布B上創建新的像素。 例如。如果圖像的像素（120,45）爲綠色，我需要在畫布B中創建一個綠色的像素（120,45）

Answer 1

您可以使用canvas ImageData獲取每個像素的顏色值。功能：

context.getImageData(left, top, width, height); 

返回ImageData對象，該對象包括以下屬性：

• 寬度
• 高度
• 數據（CanvasPixelArray）

的CanvasPixelArray包含所有像素的RGBA值，從t開始左轉右移到右下方。換句話說，它是一個包含4*width*height條目數量的數組。

使用它，您可以開始循環每個像素（每個像素的+=4條目），並檢查RGBA值。如果它們匹配您想要的特定值，即綠色，那麼您將該值複製到畫布B，您可以通過修改新創建的ImageData對象來創建畫布B.

您可以創建一個新的空的ImageData對象：

context.createImageData(cssWidth, cssHeight) 

請注意，您需要知道識別「綠色」的具體RGBA值或定義特定的條件，也就是說，如果RGBA的G值是>= 150那麼它就是「綠色」。

另外請注意，你不能得到ImageData已被污染的資源以外的來源。即，如果您將圖像繪製到不是CORS安全的畫布上，則無法再從該畫布檢索ImageData，就像您不能使用toDataURL一樣。