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

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

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

DEMO

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

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

AD

imgColor

Github

サンプルコード

Rgbaster.js

Github

サンプルコード

Color Thief

公式サイト

サンプルコード

Vibrant.js

公式サイト

サンプルコード

jquery.primarycolor.js

Github

サンプルコード

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

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

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。