
Canvasとブラー(EaselJSでもBlur)
このブログをリニューアルしたときに、
各エントリーのメインビジュアルのサイズが変更となってしまったことにより、
投稿済みのエントリーについてどうするかということで、制作し直すのは面倒ということで、各画像で一番利用されているカラーを取得し、
そのカラーで背景を塗りつぶし、画像自体にインナーシャドウを適用するということをやっていました。
iTunes11ぐらいがそんな感じの表現だったような気がしています。
ということをエントリーする予定だったのですがしなかった。
ただ、この表現、どうしても取得されるカラーと画像自体から受ける印象に差が出ることがあって、気に入っていない部分もあったので
今回違う表現方法にしてみた。
丁度iTunes12のアルバムのような感じです。
ブラー処理を適用しているのですが、実装にいたるまでの流れをご紹介。
まずは、ASに近い間隔で扱え、かつ最近アップデートされたということでCreateJS(EaselJS)を利用してみることに。
BlurFilterクラスを利用することになるのですが、
ここのビジュアルに必要となるサイズに適用してみたら、遅い。
qualityオプションが1でも遅い。
2だともはや事故。
1だと綺麗じゃないし、そもそも遅すぎてまるで実用にならないということで
他に方法はないかと検索してみたら、StackBlurというライブラリを発見。
もうデモの段階で早くてクオリティも素晴らしい。
(EaselJSのBlurFilterのqualityだと2と同じぐらいに感じる)
ということで、CreateJSを捨て、StackBlurを採用し、元の画像の端をうにゃうにゃさせて、実装完了。
このエントリーのビジュアルが適用されるようになっています。
より高速な(若干品質が落ちます)Superfast Blurもあるようです。
CreateJSというかEaselJSはもうちょっと頑張ってほしい。