Извлечение цветов из 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: Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': предоставленное значение не относится к типу '(CSSImageValue или HTMLImageElement или SVGImageElement, или HTMLVideoElement, или HTMLCanvasElement, или ImageBitmap, или ImageBitmap, или OffscreenCanvas) *

Я собрал здесь скрипку:

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

Как мне этого добиться?

Answer 1

Ошибка связана с тем, что изображение находится в другом домене. Добавьте атрибут crossDomain = "anonymous" к элементу изображения.

Пример:

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