ITエンジニア/デザイナ向けにオープンソースを毎日紹介

おお、これは格好いい!

写真のサムネイル表示というのはやり方によって大きくインパクトが変わります。単純に縮めて表示すると何の写真か分かりづらくなります。さらに横長、縦長の写真では正方形に切り出すのは簡単ではありません。

そこで使ってみたいのがsmartcrop.jsです。写真の中から一部を切り出すライブラリで、よりインパクトの強い部分を抽出します。

smartcrop.jsの使い方

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

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

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

これは完全に左側から。
これは完全に左側から。

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

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

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

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

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

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

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

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

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

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

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

smartcrop.js testbed

jwagner/smartcrop.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2