72391


画像から主に使用される色を取得したく[color-thies](https://lokeshdhakar.com/projects/color-
thief/#getting-started)と言うライブラリーを使用したいのですが上手く動作しないです。

フロントエンドから使用したいのでCDNで読み込んでいます。

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
    
[/code]

それで公式ドキュメント通りに画像のパスではなく、画像タグを指定しているのですが返ってくる値が毎回同じです。

[code]

    <script>
        const colorThief = new ColorThief();
        const img = document.querySelector('img');
    
        // Make sure image is finished loading
        if (img.complete) {
          colorThief.getColor(img);
        } else {
          image.addEventListener('load', function() {
            colorThief.getColor(img);
          });
        }
    </script>
    
[/code]

そして`console.log(colorThief.getColor(img));`で毎回返ってくる値を確認しているのですが、`[144, 161,
166]`が毎回配列になってどの画像でも同じ値が返ってきます。  
画像のsrc等が外部からなのが原因なのでしょうか？

例：  
<https://img.youtube.com/vi/IcU5lh_EWvc/maxresdefault.jpg>

ただローカルの画像パスでも試したのですが、結果は同じでした。  
詳しい方、助けて頂けないでしょうか？


CC BY-SA 4.0
2020-12-04T05:31:49.727
72390
2020-12-04T06:18:00.740
2020-12-04T06:18:00.740
3060
22565
question
javascript
Javascriptのライブラリーで画像から色を抽出するcolor-thiefで毎回RGB(144, 161, 166)と同じ色が取得される。


[FAQ](https://lokeshdhakar.com/projects/color-
thief/#faq)にありますが別ドメインの画像だとCORSの制限を受けます。  
FAQではプロキシを設置し緩いCORSポリシーを設定するか、テスト用にGoogleのプロキシサーバーの利用する方法が紹介されてます。


CC BY-SA 4.0
2020-12-04T05:43:37.770
72391
2020-12-04T05:43:37.770
241
72390
answer