おお、これは格好いい！ 写真のサムネイル表示というのはやり方によって大きくインパクトが変わります。単純に縮めて表示すると何の写真か分かりづらくなります。さらに横長、縦長の写真では正方形に切り出すのは簡単ではありません。 そこで使ってみたいのがsmartcrop.jsです。写真の中から一部を切り出すライブラリで、よりインパクトの強い部分を抽出します。

smartcrop.jsの使い方

デモです。よりインパクトの大きい場所を抽出しているのが分かるかと思います。

切り出す形を変更することもできます。その場合でも写真全体を対象にする訳ではありません。

さらにサンプル。女性を中心に抽出しています。

これは完全に左側から。

ヨットを中心に。サムネイルでも格好いいですね。

街並。より印象的なビルを中心にしています。

こちらは川と太陽が中心です。

人の場合は顔を中心にするようです。

多数の人がいる場合。より彩度の強い場所が出ているようです。

幾何学的な場合でもより印象の強い部分がターゲットになります。

こちらは人ではなく下の部分が取り出されています。面白いですね。

こちらは人がちょっと左寄り。

こんなロマンチックな写真もサムネイルになるとさらに格好よく。

smartcrop.jsはJavaScriptベースで写真の一部を切り出してサムネイルにしています。そのアルゴリズムが非常に気になるでしょう。確かにスマートなクロップ機能と言えそうです。

smartcrop.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェア（MIT License）です。

smartcrop.js testbed jwagner/smartcrop.js