ImageData: data 屬性
注意：此功能在 Web Workers 中可用。
只讀的 ImageData.data 屬性返回一個 Uint8ClampedArray 或 Float16Array，其中包含 ImageData 物件的畫素資料。資料以 RGBA 順序儲存在一維陣列中。
值
型別取決於使用的 ImageData.pixelFormat。
- 如果
pixelFormat是"rgba-unorm8"，則為Uint8ClampedArray。 - 如果
pixelFormat是"rgba-float16"，則為Float16Array。
示例
獲取 ImageData 物件的畫素資料
此示例建立一個寬度為 100 畫素、高度為 100 畫素的 ImageData 物件，總共 10,000 個畫素。data 陣列為每個畫素儲存四個值，總共 4 x 10,000，即 40,000 個值。
js
let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000
如果 ImageData 物件設定為使用浮點畫素（例如，用於高動態範圍 (HDR) 影像），則 data 將為 Float16Array。
js
let floatArray = new Float16Array(4 * 200 * 200);
let imageData = new ImageData(floatArray, 200, 200, {
pixelFormat: "rgba-float16",
});
console.log(imageData.data); // Float16Array
填充空白 ImageData 物件
此示例建立一個新的 ImageData 物件並用彩色畫素填充它。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
由於 data 陣列中的每個畫素由四個值組成，因此 for 迴圈以四的倍數進行迭代。與每個畫素關聯的值按順序為 R（紅色）、G（綠色）、B（藍色）和 A（Alpha）。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);
// Fill the array with RGBA values
for (let i = 0; i < imageData.data.length; i += 4) {
// Percentage in the x direction, times 255
let x = ((i % 400) / 400) * 255;
// Percentage in the y direction, times 255
let y = (Math.ceil(i / 400) / 100) * 255;
// Modify pixel data
imageData.data[i + 0] = x; // R value
imageData.data[i + 1] = y; // G value
imageData.data[i + 2] = 255 - x; // B value
imageData.data[i + 3] = 255; // A value
}
// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);
結果
更多示例
有關使用 ImageData.data 的更多示例，請參閱 使用 canvas 進行畫素處理、CanvasRenderingContext2D.createImageData() 和 CanvasRenderingContext2D.putImageData()。
規範
| 規範 |
|---|
| HTML # dom-imagedata-data |
瀏覽器相容性
載入中…