如何從 HTML Canvas 擷取像素資料：getImageData() 方法指南

從 HTML Canvas 擷取像素資料

Web 開發人員通常需要能夠從 HTML Canvas 元素中擷取特定像素資訊。此功能支援 Web 應用程式中的進階影像操作和資料擷取任務。

查詢像素顏色

W3C 文件提供了有關 Canvas API 中像素操作的全面部分。 getImageData() 方法是擷取像素資料的核心：

<code class="javascript">var context = document.getElementById('myCanvas').getContext('2d');
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;</code>

此程式碼片段取得表示畫布上指定矩形區域的像素資料的 CanvasPixelArray。 pix 陣列包含每個像素的值數組，代表紅色、綠色、藍色和 alpha（透明度）通道值。

範例：影像反轉

至示範像素操作的應用，考慮反轉影像的顏色：

<code class="javascript">for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i  ] = 255 - pix[i  ]; // red
    pix[i+1] = 255 - pix[i+1]; // green
    pix[i+2] = 255 - pix[i+2]; // blue
    // i+3 is alpha (the fourth element)
}

context.putImageData(imgd, x, y);</code>

此程式碼循環遍歷像素數組，反轉每個像素的紅色、綠色和藍色通道值。處理後，修改後的 ImageData 將重新繪製到畫布上，從而產生負影像效果。

利用 getImageData() 方法，Web 開發人員可以存取和操作 HTML Canvas 中的單一像素數據，從而實現廣泛的圖像處理和自定義視覺效果應用程式。

以上是如何從 HTML Canvas 擷取像素資料：getImageData() 方法指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！