javascript - 从图像 URL 中提取颜色

Question

我有一个接受图像 url 的输入

我的目标是读取该图像并从中提取 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
     */
}); 

我无法让它工作。

我不断得到

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

我在这里整理了一个 fiddle :

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

我怎样才能做到这一点？

Answer 1

该错误是图像位于不同域的结果。将属性 crossDomain = "anonymous"添加到图像元素。

例子:

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