画像の縮小アルゴリズムの改善

授業ごとのメッセージに写真を１点添付できる機能を加えたのですが、大きな画像がたまるとディスクがじきに逼迫するのは目に見えているため、画像サイズは512×512ピクセル固定*としました。

そのため、画像をアップロードする前に、クライアント側で画像の縮小を行なう工程を入れてあったのですが、単純にcanvasのdrawImage()で縮めただけだったため、物体の縁や線の部分がジャギーになってしまっていました。

ピクセル毎に処理するのも重たそうだったので、ウェブで見つけた「多段階縮小アルゴリズム」**に変えてみたところ、実用に耐えるレベルにはなったのではないかと思います。

これまでのアルゴリズムで縮小

改良版のアルゴリズムで縮小

* その昔、卒業論文のときに、実験で撮影した写真をCCDカメラでコンピュータに取り込んで、画像処理を行なったのですが、その装置は小部屋をひとつ占有するくらいの大きさで、「ミニコン」という大きなコンピュータによって制御されていました。その時の画像解像度が512 x 512で、当時としては画期的に高解像度でした。

** 例えば Resize image with javascript canvas (smoothly)
ただし、記事の中で、同じcanvasのデータを上書きするようなコードの例がありましたが、それではうまく動作しませんでした。canvasから別のcanvasのgraphics contextに対して描画、が基本。