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 2015年7月.

読み取り専用プロパティ ImageData.data は、ImageData オブジェクトのピクセルデータが入った Uint8ClampedArray を返します。データは RGBA の順に 0 から 255 (両端を含む) の整数値の 1 次元配列として格納されます。

値

Uint8ClampedArray です。

例

ImageData オブジェクトのピクセルデータを取得する

この例では、幅 100 ピクセル、高さ 100 ピクセルの ImageData オブジェクトを生成します。全部で 10,000 ピクセルになります。配列 data には各ピクセルについて 4 個の値が格納され、全部で 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 オブジェクトを埋める

この例では、新しい ImageData オブジェクトを生成し、カラフルなピクセルで埋めます。

HTML

html

JavaScript

配列 data では各ピクセルが 4 個の値からなるので、for ループのループ変数を 4 ずつ進めます。各ピクセルに対応する値は、順に R (赤)、G (緑)、B (青)、A (不透明度) です。

js
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);

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2023年8月28日 by MDN contributors.

View this page on GitHub • Report a problem with this content

キャンバス API
ImageData
コンストラクター
1. ImageData()
インスタンスプロパティ
Canvas API に関連するページ
ガイド
1. キャンバスを使用した動画の操作
チュートリアル
1. キャンバスのチュートリアル
2. キャンバスの基本的な使い方
3. キャンバスでの図形の描画
4. スタイルと色の適用
5. テキストの描画
6. 画像の使用
7. 座標変換
8. 合成とクリッピング
9. 基本的なアニメーション
10. 高度なアニメーション
11. キャンバスとピクセル操作
12. キャンバスの最適化
13. おわりに

ImageData: data プロパティ

In this article

値

例

ImageData オブジェクトのピクセルデータを取得する

空の ImageData オブジェクトを埋める

HTML

JavaScript

結果

他の例

仕様書

ブラウザーの互換性

関連情報

Help improve MDN