こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。

今回はNuxt.jsでColorThiefを利用して画像から色を抽出する方法について解説していきます。

なぜこの記事を書こうと思ったのか？

当サイトでは、利用者の方がフリー写真素材を見つけやすいように、いくつかの検索機能を実装しておりますが、その中でも色から画像を検索する機能の精度があまり良くない状態が続いていました。

色から画像を検索する機能の改善にあたり、躓いた箇所があったため備忘録も兼ねて記事を書いてみました。

画像から色を算出する処理の流れ（今まで）

①rgbasterで画像から色を算出

https://www.npmjs.com/package/rgbaster

②color-classifier.jsで指定した色から近い色を算出

https://www.npmjs.com/package/color-classifier

このような形で画像から色を取得していました。

rgbasterは使用方法が非常に簡単で良かったのですが、当サイトとの相性が良くなく常に偏った色を算出してしまっていました。

そこで今回位①の画像から色を算出する箇所を改善をすることになりました。

今回ライブラリを選定するにあたり、以下のことを意識しました。

• Nuxt.js、Vue.jsもしくはNode.jsで利用できること
• 以前と比べて適切な色を算出できること

以上のことを考慮した結果、「ColorThief」を採用しました。

https://lokeshdhakar.com/projects/color-thief/

Nuxt.jsでのColorThief利用方法

ColorThiefの公式サイトにも利用方法が書いているのである程度参考にすれば利用できるのですが、Nuxt.js（おそらくVue.jsでも）で利用する場合は一工夫必要でした。

手順① インストール

npm i --save colorthief

手順② モジュールをインポート

vueファイル

import ColorThief from "colorthief";

手順③ img要素から色を算出

vueファイル

<template>
    <div>
        <img src="hoge.jpg" alt="" @load="imgColorCalc" ref="hogeImage"/>
    </div>
</template>

<script>
import ColorThief from "colorthief";

export default {
    methods: {
        imgColorCalc() {
            const colorThief = new ColorThief();
            const hogeImage = this.$refs.hogeImage;
            console.log(colorThief.getColor(hogeImage)); // 実行結果[56, 117, 184]
        }
    }
}
</script>

上記を実行するとimg要素の画像から色をRGB形式で抽出することが出来ます。

当サイトでの活用方法

img要素のsrc属性を動的に変更できるようにし、画像がロードされたら、hogeImage関数を実行するようにしています。

番外編 色をHEX形式に変換する

※公式サイトでも紹介されていますが、今回は当サイトで使用している処理を解説します。

<template>
    <div>
        <img src="hoge.jpg" alt="" @load="imgColorCalc" ref="hogeImage"/>
    </div>
</template>

<script>
import ColorThief from "colorthief";

export default {
    methods: {
        imgColorCalc() {
            const colorThief = new ColorThief();
            const hogeImage = this.$refs.hogeImage;
            console.log(colorThief.getColor(hogeImage)); //[56, 117, 184] RGB形式で出力
            rgbToHex(`rgb(${colorThief.getColor(hogeImage).join()})`)) // 実行結果：#3875b8 HEX形式で出力
        },

        rgbToHex(rgbColor) {
            return ("#" + rgbColor.match(/\d+/g).map(color => {
                return ("0" + parseInt(color).toString(16)).slice(-2);
            }).join(""));
        }
    }
}
</script>

このようにしてHEX形式でも色を取得できます。

---

ネットで検索するとNode.jsではColor Thief Nodeを使用する方法が出てきたり、そもそもNuxt.jsで使用する方法で解説されているサイトが少なかったのでまとめてみました。

誰かのお役に立てれば幸いです。