从图片网址中提取颜色

Question

我有一个输入的图片网址

我的目标是读取该图像并从中提取2种十六进制颜色。

我研究发现了一个：https://jariz.github.io/vibrant.js/

我尝试过集成

图片

<img name="logo_path" id="skill-icon" src="/img/default.png" width="300px"><br><br>

输入

<input type="file" class="form-control" name="logo_path" aria-describedby="fileHelp">

JS

var icon = $('#skill-icon');
icon.attr('src', $( "#url-logo" ).val());

$( "#url-logo" ).on('keyup',function(){


    var vibrant = new Vibrant(icon);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())

    /*
     * Results into:
     * Vibrant #7a4426
     * Muted #7b9eae
     * DarkVibrant #348945
     * DarkMuted #141414
     * LightVibrant #f3ccb4
     */
}); 

我无法使用它。

我不断得到

  

未捕获的TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）类型的值

我在这里放了一个小提琴：

https://jsfiddle.net/bheng/fkqx5gad/

我该如何实现？

Answer 1

该错误是由于图像位于其他域而导致的。将属性crossDomain =“ anonymous”添加到图像元素。

示例：

<img src="test.jpg" crossOrigin="anonymous" />