getImageData()メソッド

canvas上のピクセルを取得するメソッド
・Canvas指定範囲の「ImageDataオブジェクト」を取得する際に使用
・Canvas内に描画されている画像／ピクセルデータを読み出す

読み出した結果
・JavaScript配列に格納される（通常の配列でありTyped Arrayではない。つまりUInt8Array配列では返されない）
・ピクセルデータは「getImageData()より読み出したオブジェクト」のdataプロパティに格納されている
・配列の4つの要素で1ピクセルを示す
・これは「赤の輝度」「緑の輝度」「青の輝度」「不透明度（αチャンネル）」の順番になっている
・10ピクセルであれば10×4=40要素の配列になる

構文

特徴
・画像ではなく、canvasの一部（矩形）を指定
・戻り値(オブジェクト)は、その矩形の内の全てのピクセルの情報を保持

---

引数

sx
・取得範囲の開始x座標
・ピクセルデータを取得する領域のX座標
・抽出元となる矩形始点座標のX軸

sy
・取得範囲の開始y座標
・ピクセルデータを取得する領域のY座標
・抽出元となる四角形のエンドポイントの座標のY軸

sw
・取得範囲の幅
・取得する横幅
・ImageData抽出元となる矩形の幅
・0を指定すると、エラー（INDEX_SIZE_ERR）

sh
・取得範囲の高さ
・取得する縦幅
・ImageData抽出元となる矩形の高さ
・0を指定すると、エラー（INDEX_SIZE_ERR）

---

戻り値

canvasのピクセルデータをImageDataオブジェクトで返す
・canvasの指定された矩形画像データを含んでいるImageDataオブジェクトを返す

取得したImageDataオブジェクト
・widthプロパティ … 幅
・heightプロパティ … 高さ
・dataプロパティ … CanvasPixelArrayオブジェクト
※CanvasPixelArrayオブジェクト … 配列に似た形式で各ピクセルの色情報を格納している

---

その他

ピクセルデータはcanvasからしか取得できない
・画像から直接 getImageData でピクセルを取得不可
・画像を一度canvasに貼り付けないとピクセルが取得できない