Tweet

Pocket

Canvasのピクセル走査のメモ

キャンパスのピクセル情報取得

Canvasの各ピクセルへアクセスは次のように行う。

1. Canvas(HTMLCanvasElement)のgetContext(‘2d’)でCanvasRenderingContext2Dを取得する。
2. 取得したCanvasRenderingContext2DのgetImageDataメソッドでCanvasの各ピクセル情報を持つImageDataを取得する。
3. ImageDataはCanvasのピクセル情報を持つ。カラー情報はImageData.dataプロパティに格納している。

» CanvasRenderingContext2D

interface CanvasRenderingContext2D {

  // .....................................

  // drawing images
  void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy);
  void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
  void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);

  // pixel manipulation
  // .....................................
  ImageData getImageData(double sx, double sy, double sw, double sh);
  void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
  void putImageData(ImageData imagedata, double dx, double dy);
};

» ImageDataインターフェース

interface ImageData {
  readonly attribute unsigned long width;
  readonly attribute unsigned long height;
  readonly attribute Uint8ClampedArray data;
};

下記のような画像をcanvasに描画し、描画した全てのピクセルを走査してconsoleに表示するサンプル。

» GitHub