2018
09/05

画像からメインカラーを取得するjavascriptライブラリの比較

動的に画像の色を取得して背景や枠線にするような処理を使いたかったため、画像のメインカラー(ドミナントカラーやプライマリーカラーとも言うそうです)を取得するJavascriptライブラリについて調べました。

調べた5つのライブラリについて、どのような結果が得られるかテストページを作ってみましたので参考にしてみてください。画像をサーバーに保存したりはしませんので秘蔵のお宝写真なども遠慮なくご利用ください。

DEMO

こんな感じで取得した色が画像の縁につくようにしました。

今回試してみたのは以下の5つのライブラリです。
他に同種のライブラリをご存知の方はぜひ教えていただけると幸いです。

ADs

imgColor

Github

サンプルコード

Rgbaster.js

Github

サンプルコード

Color Thief

公式サイト

サンプルコード

Vibrant.js

公式サイト

サンプルコード

jquery.primarycolor.js

Github

サンプルコード

DEMOの結果を見ると、ライブラリによって少しずつ得られる結果が違います。Vibrant.jsがメインカラー以外の色を取得することもでき、いい感じの結果を出しているかな、という印象です。

余談:デモページはVue.jsでつくってみた

1ページで完結する上に大したことない処理なので、vue-cliは使わずCDNからvue.jsを読み込んで使いました。ちょっとずつ覚えていこう。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

デモページがが動きませんでした。

  • 2022年2月17日 12:34 PM

申し訳ありませんでした。
直しました。

  • 管理人
  • 2022年3月14日 10:28 PM