Color Thief で画像のドミナントカラーを検出

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]

< 画面例 >

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

 

Googleのタイムラインチャートで表示
JAL, ANA, SkyMark, StarFlyer で色分けされたバーになります。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

天草エアラインの奇跡。 (集英社文庫(日本)) [ 鳥海 高太朗 ]
価格:572円(税込、送料無料) (2023/2/14時点)

楽天で購入

 

 

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

航空情報増刊 世界航空機年鑑 2022-2023 2023年 3月号 [雑誌]
価格:7700円(税込、送料無料) (2023/2/14時点)

楽天で購入

 

 

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

【全部揃ってます!!】日本のエアライン4 [全8種セット(フルコンプ)]【 ネコポス不可 】
価格:5984円(税込、送料別) (2023/2/16時点)

楽天で購入