*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
|画像サイズ（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|-|×|
