HTML Canvasでバイリニア法、バイキュービック法、ランチョス法

ディレクトリを漁っていたら、10年ぐらい前に書いたHTML CanvasJavaScriptによるバイリニア法の画像拡大のコードが出てきた。これが酷いコードだったので最近の文法も使って書き直し、ついでなのでバイキュービック法とランチョス法による拡大縮小も書いてみたり。

バイキュービック法とランチョス法ではバイリニア法よりシャープな感じに仕上がる。

最初にこのバイリニア法のコードを書いた頃、Firefoxのバージョンは3、Chromeはまだ存在しなかった(Windows版はあったらしい)。当時のブラウザとマシンでは180 x 180の画像を縦横2倍に拡大するだけで10秒程度かかっていたのが今や一瞬で完了。CPUとJSエンジンの進化、凄まじい。

ところで先日、こんな記事が話題になっていた。

さようなら ImageMagick - Cybozu Inside Out | サイボウズエンジニアのブログ

ImageMagickのセキュリティ問題多いのでサムネイル作成処理をGoで書き直したという話だが、今どきのJSエンジンとCPUパワーならば、サムネイルの作成程度ならばフロントでも処理できてしまう。canvaspng画像として取り出す方法もあるので、いっそフロントでサムネイルを作ってサーバに送信し、バックエンド側はバリデーションだけってのもアリかもしれないっすよ?

自分でバイナリ弄るコードを書かなくてもcanvasのscaleメソッドを呼ぶだけでも縮小処理は可能だし、ガチで最適化かけた超速いサムネイル作成ライブラリとか探せばあるかもしれないっすよー。知らんけど。