Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ja/docs/Web/API/ImageData/data below:

ImageData: data プãƒãƒ‘ティ - Web API

Baseline Widely available

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

Uint8ClampedArray です。

この例では、幅 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 オブジェクトを生成し、カラフルなピクセルで埋めます。

<canvas id="canvas"></canvas>

配列 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() を参照してください。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4