getImageData()メソッド

CanvasRenderingContext2D getImageData()メソッド

概要

 状態:-  閲覧数:927  投稿日:2014-06-28  更新日:2016-08-12  
canvas上のピクセルを取得するメソッド
・Canvas指定範囲の「ImageDataオブジェクト」を取得する際に使用
・Canvas内に描画されている画像/ピクセルデータを読み出す

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

構文
CanvasRenderingContext2Dオブジェクト.getImageData(sx, sy, sw, sh)

特徴
・画像ではなく、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に貼り付けないとピクセルが取得できない

具体例


コメント投稿(ログインが必要)