2013年7月2日火曜日

HTML5 Canvasで画像のリサイズするならコレ!「JS-Image-Resizer」

クライアントサイドでのHTML5での画像のリサイズは普通Canvasを使うだろう。

しかし、実際にCanvasのリサイズをやってみて、そのクオリティーの低さに驚いた。


1. Canvasでリサイズ


これがMacのPreviewでリサイズしたもの。


そしてこれがCanvasでリサイズしたもの。


ジャギジャギしてて画像としての価値は大きく下がってしまう

Flashなんかだと、デフォルトでまあまあのクオリティーのスムージングがかかるのであまり気にすることはなかったが、こりゃダメダメだ。


2. Lanczosアルゴリズムでリサイズ


そこで、もっとハイクオリティにリサイズする方法は無いかと調べた。まずあたったのはこちら。

javascript - Resizing an image in an HTML5 canvas - Stack Overflow

これはLanczosアルゴリズムでリサイズする方法だ。

ハンガリーの人「Cornelius Lanczos (Hungarian pronunciation: [ˈlaːntsoʃ])」の名前が由来で「ラーンツォシュ」と読むらしい。

Lanczos resampling - Wikipedia, the free encyclopedia

実際に試してみると、Previewと比べると全体的にボケ気味なものの、なかなかのクオリティーだった。


しかし、この方法には問題がある。とにかく遅いのだ。


3. JS-Image-Resizerでリサイズ


そこで、これくらいのクオリティーを保ちながらもっと速い方法は無いかと調べ始め、ここに行き着いた。

grantgalitz/JS-Image-Resizer

速い!しかもLanczosやPreviewのクオリティーに引けをとらない!しかも、WebWorkerにまで対応している。


実際に使わせて頂くにあたり、ライセンスが気になった。特にライセンスについて記述が無いからだ。

そこで、作者のGrant氏に直接コンタクトを取った所、「パブリックドメインだ」とのこと!すばらしい!R.E.S.P.E.C.T!!


4. サンプル

早速サンプルを書いてみた。それぞれの方法の速度とクオリティーの違いを比べることができる。

HTML5 Client Side Image Resize Battle - JS-Image-Resizer vs Lanczosh3 vs Canvas


サンプル一式(imageresizebattle.zip

このライブラリは、これからのHTML5時代できっと大きな役割を果たすことになるだろう。

Grant氏に感謝!