HiiHahWIKI - making some notes for... -
JavaScript:jpg.jsをつかってImageオブジェクトを使用せずにcanvasに画像を描画
をテンプレートにして作成
開始行:
*JavaScript:jpg.jsをつかってImageオブジェクトを使用せず...
表題の通り、imageオブジェクトを生成せずにcanvasに画像を描...
これには、「jpg.js」を使用します。
-https://github.com/notmasteryet/jpgjs
まあ、なぜこんなことをするかというと、imageオブジェクトの...
(まあ、よく考えれば当たり前ですが、、、)
で、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.mozRespo...
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を食わせてpar...
-displayImage関数で、描画するcanvasのcontextから一旦イメ...
-JpegImageオブジェクトのcopyToImageDataメソッドでイメージ...
-contextオブジェクトのputImageDataメソッドでイメージデー...
ふむふむ、簡単ですな。
***どれくらいの画像を処理できるの? [#a54e701c]
まあ、通常ブラウザ(おそらくC)側で実装されているJPEG画像...
当方の環境では、こんな感じでした。
結論としては、大きい画像はエラーが発生し、処理できません...
-メモリ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|-|×|
他の環境での動作状況が気になるところですな。
まあ、調べたら追記ましす。
終了行:
*JavaScript:jpg.jsをつかってImageオブジェクトを使用せず...
表題の通り、imageオブジェクトを生成せずにcanvasに画像を描...
これには、「jpg.js」を使用します。
-https://github.com/notmasteryet/jpgjs
まあ、なぜこんなことをするかというと、imageオブジェクトの...
(まあ、よく考えれば当たり前ですが、、、)
で、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.mozRespo...
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を食わせてpar...
-displayImage関数で、描画するcanvasのcontextから一旦イメ...
-JpegImageオブジェクトのcopyToImageDataメソッドでイメージ...
-contextオブジェクトのputImageDataメソッドでイメージデー...
ふむふむ、簡単ですな。
***どれくらいの画像を処理できるの? [#a54e701c]
まあ、通常ブラウザ(おそらくC)側で実装されているJPEG画像...
当方の環境では、こんな感じでした。
結論としては、大きい画像はエラーが発生し、処理できません...
-メモリ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|-|×|
他の環境での動作状況が気になるところですな。
まあ、調べたら追記ましす。
ページ名: