ImageBitmap について
■ ImageBitmap について
Canvas 2D Context や WebGL 関連の機能です。
ImageBitmap オブジェクトは、ビットマップ１枚分に相当します。
最適化済みのテクスチャとして利用します。
■ ImageBitmap 型の利点について
ブラウザには、様々なメモリ節約機能が組み込まれています。
画像やビデオなどのリソースは、必ずしもデコード済みであるとは限りません。
この仕様は、ゲームなどのコンテンツでは不向きです。
そこで、ImageBitmap を利用します。
最速で描画を開始できるように、事前に準備を済ませる事ができます。
■ImageBitmap の機能一覧
■プロパティ
| プロパティ名 | 型 | 説明 |
| width | Number | 幅（ピクセル数）を取得する |
| height | Number | 高さ（ピクセル数）を取得する |
ImageBitmap オブジェクトを作成する
■ImageBitmap オブジェクトを作成する
createImageBitmap() メソッドを使用します。
Window.createImageBitmap ( image ) :Promise
| 第01引数 | * | ソースイメージを指定。 |
| 戻り値 | Promise | 新しい Promise オブジェクトが得られる。 |
Window.createImageBitmap ( image , sx , sy , sw , sh ) :Promise
| 第01引数 | * | ソースイメージを指定。 |
| 第02引数 | Number | (切り抜き) 水平方向の位置を指定。（テクスチャ座標系） |
| 第03引数 | Number | (切り抜き) 垂直方向の位置を指定。（テクスチャ座標系） |
| 第04引数 | Number | (切り抜き) 幅を指定。 |
| 第05引数 | Number | (切り抜き) 高さを指定。 |
| 戻り値 | Promise | 新しい Promise オブジェクトが得られる。 |
■第01引数（ソースイメージ）
以下のオブジェクトを、ソースとして利用できます。
| 型 | 説明 |
| HTMLImageElement | <IMG> 要素 |
| HTMLCanvasElement | <CANVAS> 要素 |
| HTMLVideoElement | <VIDEO> 要素 |
| Blob | Blob or File オブジェクト |
| CanvasRenderingContext2D | CanvasRenderingContext2D オブジェクト |
| ImageData | ImageData オブジェクト |
| ImageBitmap | 最適化済みテクスチャ |
■戻り値（Promise）
実行結果を受け取るには、then() メソッドを使用します。
非同期で動作します。
引数にコールバック関数を指定します。
■使用例
イメージ要素から、ImageBitmap オブジェクトを作成する
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
// ------------------------------------------------------------
var image = new Image();
// ------------------------------------------------------------
// 読み込みに成功すると実行されるイベント
// ------------------------------------------------------------
image.onload = function (){
// ------------------------------------------------------------
// ImageBitmap オブジェクトを作成する
// ------------------------------------------------------------
// 実行を開始する
var promise = window.createImageBitmap(image);
// 結果を受け取る
promise.then(
// ------------------------------------------------------------
// 成功時に実行されるコールバック関数
// ------------------------------------------------------------
function success(image_bitmap){
// 出力テスト
console.log(image_bitmap);
},
// ------------------------------------------------------------
// 失敗時に実行されるコールバック関数
// ------------------------------------------------------------
function failure(e){
// 出力テスト
console.log(e);
}
);
};
// ------------------------------------------------------------
// URL を指定して読み込みを開始する
// ------------------------------------------------------------
image.src = "http://example.com/graphics/texture_00.png";
ローカルの画像ファイルから、ImageBitmap オブジェクトを作成する
<html>
<body>
<canvas id="canvas" width="640" height="480" style="border:1px solid #000;" ></canvas> <br>
<input type="file" id="input_file" >
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// 各エレメントを取得する
// ------------------------------------------------------------
var canvas = document.getElementById("canvas");
var input_file = document.getElementById("input_file");
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 値が変化した時に実行されるイベント
// ------------------------------------------------------------
input_file.onchange = function (){
// ファイルが選択されたか
if(!(input_file.value)) return;
// File オブジェクトを取得する
var file = input_file.files[0];
if(!file) return;
// ------------------------------------------------------------
// ImageBitmap オブジェクトを作成する
// ------------------------------------------------------------
// 実行を開始する
var promise = window.createImageBitmap(file);
// 結果を受け取る
promise.then(
// ------------------------------------------------------------
// 成功時に実行されるコールバック関数
// ------------------------------------------------------------
function success(image_bitmap){
// ------------------------------------------------------------
// ImageBitmap オブジェクトを描画する
// ------------------------------------------------------------
context.drawImage( image_bitmap , 0 , 0 );
},
// ------------------------------------------------------------
// 失敗時に実行されるコールバック関数
// ------------------------------------------------------------
function failure(e){
// 出力テスト
console.log(e);
}
);
};
//-->
</script>
</body>
</html>
ImageData オブジェクトから、ImageBitmap オブジェクトを作成する
<html>
<body>
<canvas id="aaa" width="640" height="480" style="border:1px solid #000;" ></canvas>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var canvas = document.getElementById("aaa");
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// ImageData オブジェクトを作成する
// ------------------------------------------------------------
var image_data = context.createImageData( 256 , 256 );
// ------------------------------------------------------------
// ランダム値を書き込む（ノイズエフェクト）
// ------------------------------------------------------------
var ary_u8 = image_data.data;
var i;
var num = ary_u8.length;
for(i=0;i < num;i++){
ary_u8[i] = Math.floor(Math.random() * 255);
}
// ------------------------------------------------------------
// ImageBitmap オブジェクトを作成する
// ------------------------------------------------------------
// 実行を開始する
var promise = window.createImageBitmap(image_data);
// 結果を受け取る
promise.then(
// ------------------------------------------------------------
// 成功時に実行されるコールバック関数
// ------------------------------------------------------------
function success(image_bitmap){
// ------------------------------------------------------------
// ImageBitmap オブジェクトを描画する
// ------------------------------------------------------------
context.drawImage( image_bitmap , 0 , 0 );
},
// ------------------------------------------------------------
// 失敗時に実行されるコールバック関数
// ------------------------------------------------------------
function failure(e){
// 出力テスト
console.log(e);
}
);
//-->
</script>
</body>
</html>