JavaScript：jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画 のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• JavaScript：jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画 へ行く。
  • 1 (2013-06-08 (土) 14:46:44)

JavaScript?：jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画 †

表題の通り、imageオブジェクトを生成せずにcanvasに画像を描画する方法です。

これには、「jpg.js」を使用します。

• https://github.com/notmasteryet/jpgjs

まあ、なぜこんなことをするかというと、imageオブジェクトのソースに「data:image/jpeg;base64,xxxxx,,,,」って形でデータを設定したら、Chromeの開発者ツールで表示している画像のデータが見えなくなると思ってたんですが、実際はリソースへのアクセスなのでNetworkのところから見えてしまって。
（まあ、よく考えれば当たり前ですが、、、）

で、imageオブジェクト（imgタグ）を使用しないでcanvasに書く方法を探していたら見つかったので紹介です。

ソースコード †

• ベースのHTMLで、このJavaScript?より先にjpg.jsを読み込ませてください。
• 画像のパスは適当に設定してください。

function getImageData(){
	var xhr = new XMLHttpRequest();
	xhr.open("GET", '/path/to/image.jpg', true);
	xhr.responseType = "arraybuffer";
	xhr.onload = (function() {
		var data = new Uint8Array(xhr.response || xhr.mozResponseArrayBuffer);
		var j = new JpegImage();
		j.parse(data);
		displayImage(j);

		var viewer = new ScrollViewer("#viewer");

		}).bind(this);
		xhr.send(null);
}

function displayImage(j){
	var c = $("canvas")[0];
	c.width = j.width;
	c.height = j.height;
	var ctx = c.getContext("2d");
	var d = ctx.getImageData(0,0,j.width,j.height);
	j.copyToImageData(d);
	ctx.putImageData(d, 0, 0);
}

やってる内容は以下の通りです。

• ajaxで取得したJPEGデータ（バイナリ）から「Uint8Array」を生成
• JpegImage?オブジェクトを生成して、Uint8Arrayを食わせてparseする
• displayImage関数で、描画するcanvasのcontextから一旦イメージデータを取得
• JpegImage?オブジェクトのcopyToImageData?メソッドでイメージデータへデータをコピー
• contextオブジェクトのputImageData?メソッドでイメージデータを書き込み

ふむふむ、簡単ですな。

どれくらいの画像を処理できるの？ †

まあ、通常ブラウザ（おそらくC）側で実装されているJPEG画像処理をJavaScript?で実行するということで、どれくらいの大きさの画像が処理できるか気になるところです。

当方の環境では、こんな感じでした。

• メモリ3G、CPU Corei7　（CentOS6.1）Chrome26