Hello Absurd World!

前回: JavaScript: Resize JPEG images without losing Exif part2


JavaScriptでJPEG縮小をおこなうスクリプトが、ようやく完成に持ちこめた。
特徴は……インストールなしに、クライアントサイドで画像を縮小できる。縮小してもExifデータが失われない。縮小は同期処理なのでスクリプティングが楽。バイリニアで縮小をかけるので、画質の劣化を抑えることができる。
Demo
最近のスマフォは高画素化が進んで画像データの肥大化が進み、サーバへアップロードすると転送速度のおそさと相まってサーバの一つのプロセスを浪費しかねない。回線が潤沢に利用できないモバイル端末では、通信キャリアが画像などを圧縮してクライアントへ送ることがあるぐらいなので、逆にクライアントからサーバへ送るときも画像を小さくしてしまおうということでMinifyJpegが利用できる。

https://github.com/hMatoba/JavaScript-MinifyJpeg
depend on: jpg.js (https://github.com/notmasteryet/jpgjs)

* Minify JPEG images without losing Exif
---- Generally, resized image is generated from plane canvas, and therefore the image loses Exif.
画像縮小をExifデータを保持したまま行える




* With FileReader, simple to use
---- Many resize scripts do resize in onload event of Image() to get actual image size. My script gets actual image size from binary data.
縮小は一行書くだけ。同期処理で簡単に縮小できる

var reader = new FileReader();
reader.onloadend = (function(theFile)
{
    return function(e)
    {
        var minified = MinifyJpeg.minify(e.target.result, 1280);

        // post
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "/upload");
        xhr.setRequestHeader('Content-Type', 'image\/jpeg');
        xhr.send(minified.buffer);

        // add image to body
        var enc = "data:image/jpeg;base64," + MinifyJpeg.encode64(minified);
        $('body').append('<img src="' + enc + '" alt="">');
    }
})(f);
reader.readAsDataURL(f);

* Good quality resizing
---- Bilinear resampling keeps image quality.
フィルタ処理で画質劣化を抑えられる



* Not lightweight process
---- Manipulating values pixel by pixel. It takes a few seconds...


FileReader()に関して参考: http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files


以前書いた、Exifを保ったままJPEGを縮小するスクリプトの縮小アルゴリズムをバイリニアにした。縮小アルゴリズムの部分は以下で見つけたものをコピペ、アンドアダプト。スクリプトを公開してくれていることはなんともありがたいもんだと思う。
http://www.strauss-acoustics.ch/js-bilinear-interpolation.html

JPEGデコーダは以下のものを使っている。やはりありがたい。
https://github.com/notmasteryet/jpgjs

これでJavaScriptでのJPEG縮小は一段落。