JavaScript:jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画 の変更点
Top / JavaScript:jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画
- 追加された行はこの色です。
- 削除された行はこの色です。
- JavaScript:jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画 へ行く。
- JavaScript:jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画 の差分を削除
*JavaScript:jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画 [#o295f6d7] 表題の通り、imageオブジェクトを生成せずにcanvasに画像を描画する方法です。 これには、「jpg.js」を使用します。 -https://github.com/notmasteryet/jpgjs まあ、なぜこんなことをするかというと、imageオブジェクトのソースに「data:image/jpeg;base64,xxxxx,,,,」って形でデータを設定したら、Chromeの開発者ツールで表示している画像のデータが見えなくなると思ってたんですが、実際はリソースへのアクセスなのでNetworkのところから見えてしまって。&br; (まあ、よく考えれば当たり前ですが、、、) で、imageオブジェクト(imgタグ)を使用しないでcanvasに書く方法を探していたら見つかったので紹介です。 ***ソースコード [#o1bc197e] -ベースの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メソッドでイメージデータを書き込み ふむふむ、簡単ですな。 ***どれくらいの画像を処理できるの? [#a54e701c] まあ、通常ブラウザ(おそらくC)側で実装されているJPEG画像処理をJavaScriptで実行するということで、どれくらいの大きさの画像が処理できるか気になるところです。 当方の環境では、こんな感じでした。 -メモリ3G、CPU Corei7 (CentOS6.1)Chrome26 結論としては、大きい画像はエラーが発生し、処理できませんでした。 -メモリ3G、CPU Corei7 (VM:CentOS6.1 64bit)Chrome26 |画像サイズ(px)|サイズ(MB)|処理時間|表示可否| |640×518|0.05|34|○| |640×518|0.12|46|○| |1570×1273|0.28|128|○| |1570×1273|0.59|152|○| |2221×1800|0.52|231|○| |2221×1800|1.06|274|○| |3248×2448|1.7|-|×| 他の環境での動作状況が気になるところですな。 まあ、調べたら追記ましす。