2023-02-11 – Saoline Tips

Google chart API のバーの色をロゴ画像のドミナントカラーにしたいので、画像からドミナントカラーを検出するライブラリを探してましたところ、Color Thiefで出来るので使ってみました。
ここで教えて頂きました。

< コード例 >

ライブラリはCDNから読み込んでます。


<!-- Color Thief -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>

画像エレメントをColor Thiefで指定させるため、画像にidをつけます。


// ++ 行走査 ++ //
      $.each(rows, function (i, itm) {

        // エアラインロゴ画像にidをつける //
        td = $("#" + itm["id"]).children("td").eq(2)
        $(td).children("img").eq(0).attr("id", "alimg_" + i)

        == 省略 ==
})

Color Thiefで検出


// サイズが小さいとエラーなのでデフォルトをセットして例外で囲む //
      let color = [0, 0, 255]
      try {

        // ロゴのドミナントカラーを検出 //
        const img = document.querySelector('#alimg_' + i);
        color = colorThief.getColor(img);
        console.log(color)

      }
      catch (e) {
        //console.log(e)
      }

RGB値をhexのカラーコードに変換 (公式サイトのFAQにありました)


// RGBカラー配列Hex文字列変換 //
    const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
        const hex = x.toString(16)
        return hex.length === 1 ? '0' + hex : hex
      }).join('')

変換結果 (開発ツールのconsole)


DOWTABLE_BC1_0620_0820
(3) [27, 58, 138]
DOWTABLE_NH239_0625_0830
(3) [12, 51, 139]
DOWTABLE_7G41_0640_0845
(3) [44, 44, 44]
DOWTABLE_JL305_0700_0905
(3) [203, 4, 4]
DOWTABLE_NH241_0725_0930
(3) [12, 51, 139]
DOWTABLE_BC3_0730_0940
(3) [27, 58, 138]
DOWTABLE_JL307_0800_1005
(3) [203, 4, 4]
DOWTABLE_NH243_0830_1030
(3) [12, 51, 139]

< 画面例 >

羽田=>福岡の週間フライトスケジュール