トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

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

Last-modified: 2013-08-24 (土) 02:14:21 (2281d)
Top / JavaScript:jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画

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

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

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

まあ、なぜこんなことをするかというと、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 (VM:CentOS6.1 64bit)Chrome26
画像サイズ(px)サイズ(MB)処理時間表示可否
640×5180.0534
640×5180.1246
1570×12730.28128
1570×12730.59152
2221×18000.52231
2221×18001.06274
3248×24481.7-×

他の環境での動作状況が気になるところですな。

まあ、調べたら追記ましす。