ImageData: data プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
読み取り専用プロパティ ImageData.data
は、ImageData
オブジェクトのピクセルデータが入った Uint8ClampedArray
を返します。データは RGBA の順に 0
から 255
(両端を含む) の整数値の 1 次元配列として格納されます。
値
例
ImageData オブジェクトのピクセルデータを取得する
この例では、幅 100 ピクセル、高さ 100 ピクセルの ImageData
オブジェクトを生成します。全部で 10,000 ピクセルになります。配列 data
には各ピクセルについて 4 個の値が格納され、全部で 4 x 10,000 すなわち 40,000 個の値が格納されます。
let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000
空の ImageData オブジェクトを埋める
この例では、新しい ImageData
オブジェクトを生成し、カラフルなピクセルで埋めます。
HTML
<canvas id="canvas"></canvas>
JavaScript
配列 data
では各ピクセルが 4 個の値からなるので、for
ループのループ変数を 4 ずつ進めます。各ピクセルに対応する値は、順に R (赤)、G (緑)、B (青)、A (不透明度) です。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);
// 配列を RGBA 値で埋める
for (let i = 0; i < imageData.data.length; i += 4) {
// x 方向の割合の 255 倍
let x = ((i % 400) / 400) * 255;
// y 方向の割合の 255 倍
let y = (Math.ceil(i / 400) / 100) * 255;
// ピクセルデータを書き換える
imageData.data[i + 0] = x; // R 値
imageData.data[i + 1] = y; // G 値
imageData.data[i + 2] = 255 - x; // B 値
imageData.data[i + 3] = 255; // A 値
}
// 画像データをキャンバスに描画する
ctx.putImageData(imageData, 20, 20);
結果
他の例
ImageData.data
を用いる他の例は、キャンバスとピクセル操作・CanvasRenderingContext2D.createImageData()
・CanvasRenderingContext2D.putImageData()
を参照してください。
仕様書
Specification |
---|
HTML Standard # dom-imagedata-data-dev |
ブラウザーの互換性
BCD tables only load in the browser