ImageDataオブジェクト

HTMLCanvasElementImageDataオブジェクト

ImageDataオブジェクトとは?

 状態:確認中  閲覧数:1,063  投稿日:2016-09-09  更新日:2017-03-01  
canvas要素におけるピクセルの配列に相当するオブジェクト

ImageData.width
・ImageDataの幅
interface ImageData {
 readonly attribute unsigned long width;
 readonly attribute unsigned long height;
 readonly attribute Uint8ClampedArray data;
};
HTML Canvas 2D Context


作成するためには?


下記何れかを実行することで生成することが可能
・CanvasRenderingContext2Dオブジェクト.createImageData(width, height)(中身は黒の透明/ゼロクリアで充填されている)
・CanvasRenderingContext2Dオブジェクト.createImageData(imageData)(サイズのみ引き継ぐ)


取得するためには?


・CanvasRenderingContext2Dオブジェクト.getImageData(x, y, width, height)(canvas要素の描画内容を取得)

ImageDataオブジェクト構成

 閲覧数:237 投稿日:2016-09-09 更新日:2017-03-02 

ImageDataオブジェクト


プロパティ一覧
プロパティ名 データ型 内容
width unsigned long 幅。(単位:ピクセル値)
height unsigned long 高さ。(単位:ピクセル値)
data Uint8ClampedArray ピクセルカラーのバイナリ配列。ピクセルデータとして、Canvas内の各ピクセルの色情報が赤、緑、青、アルファ(不透明度)の順に0-255の数値として格納されている


width10px,height10px の ImageDataオブジェクト

 閲覧数:234 投稿日:2016-09-15 更新日:2017-03-03 

ピクセル


R(赤)G(緑)B(青)A(不透明度)で構成されたデータ配列
・Uint8ClampedArray
・配列の中身は0〜255の値で構成されている
※canvas要素における画素データのrgba要素が256階調(8bit)で表現されていることによる
R B G A


ImageData.data


ピクセル情報の集合体

例.1ピクセル = 「width1px」 × 「height1px」
・RGBAで構成されたデータ配列 … 1
・配列の中身は0〜255の値で構成されている
- 1
1 RBGA
例.100ピクセル = 「width10px」 × 「height10px」
・RGBAで構成されたデータ配列 … 100
・配列の中身は0〜255の値で構成されている
1 2 3 4 5 6 7 8 9 10
1 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
2 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
3 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
4 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
5 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
6 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
7 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
8 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
9 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA
10 RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA RBGA


width7px,height4px の ImageDataオブジェクト

 閲覧数:302 投稿日:2016-10-19 更新日:2017-03-05 

ImageData.data


ピクセル情報の集合体

28ピクセル = 「width7px」 × 「height4px」
・RGBAで構成されたデータ配列 … 1
- 0 1 2 3 4 5 6
0 RBGA RBGA RBGA RBGA RBGA RBGA RBGA
1 RBGA RBGA RBGA RBGA RBGA RBGA RBGA
2 RBGA RBGA RBGA RBGA RBGA RBGA RBGA
3 RBGA RBGA RBGA RBGA RBGA RBGA RBGA
pixels 配列のインデックス(番号)
・pixels[19]
- 0 1 2 3 4 5 6
0 0
1
2
3
4
5
6
1 7
8
9
10
11
12
13
2 14
15
16
17
18 19 20
3 21 22 23 24 25 26 27



pixels[19]の情報
pixels[y*width + x]
pixels[y座標✕幅 + x座標]

b-07 ピクセルを操作する
canvas要素の基本的な使い方まとめ



使用例
HTML5キャンバスをピクセル単位で操作

・終了後→ HTML5キャンバスをピクセル単位で操作


canvas要素の基本的な使い方まとめ
canvasでビットマップを操作しよう(ビットマップの明度や色調の変更)

Canvas とピクセル操作終了後再開


【ImageData について】

data
HTML canvas ImageData data Property
HTML canvas getImageData() Method
HTML5 Canvas Image Data Tutorial

・終了後 → TypedArray オブジェクト
・終了後 → ハーフトーニング 画像処理
・終了後 → あのカメラアプリをWebで再現!


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