JavaScript プログラミング講座

 

ImageBitmap について

 


■ ImageBitmap について

 
Canvas 2D Context や WebGL 関連の機能です。
 
ImageBitmap オブジェクトは、ビットマップ1枚分に相当します。
 
最適化済みのテクスチャとして利用します。
 
■ ImageBitmap 型の利点について
 
ブラウザには、様々なメモリ節約機能が組み込まれています。
 
画像やビデオなどのリソースは、必ずしもデコード済みであるとは限りません。
 
この仕様は、ゲームなどのコンテンツでは不向きです。
 
そこで、ImageBitmap を利用します。
 
最速で描画を開始できるように、事前に準備を済ませる事ができます。
 

■ImageBitmap の機能一覧

 
■プロパティ
 
プロパティ名説明
widthNumber幅(ピクセル数)を取得する
heightNumber高さ(ピクセル数)を取得する
 


 

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> 要素
BlobBlob or File オブジェクト
CanvasRenderingContext2DCanvasRenderingContext2D オブジェクト
ImageDataImageData オブジェクト
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>