I simply cannot get this to work, no matter the source of the image (The canvas has been tainted by cross-origin data)

No matter if the image is in the same place as the javascript and html - I get a an error

color-thief.min.js:18 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

I am using this which seems to work for other people but does not work for me:

var image = document.querySelector('#img');
image.onload = function(){
    var colorThief = new ColorThief();
    var color = colorThief.getColor(image); 
   console.log(color);
};

What do I have to do to make this work at all?

[th0rgall]

I had some success by using this StackOverflow answer and modifying the color-thief code on a fork to set the following property after it initializes an.

Insert after https://github.com/null2/color-thief/blob/master/js/color-thief.js#L55

img.crossOrigin = 'anonymous';

It works but I need to invoke the getColor() action a 2 times for it to work, and errors always occur the first time.

[danielehrhardt]

@moizmb do it simply like this 😃

var img = document.createElement('img');
    img.setAttribute('crossOrigin', '');
    img.setAttribute('src', this.data.src.small)
    img.addEventListener('load', () => {
        var vibrant = new Vibrant(img);
        var swatches = vibrant.swatches()
        for (var swatch in swatches)
            if (swatches.hasOwnProperty(swatch) && swatches[swatch])
                this.colorPalette.push({hex: swatches[swatch].getHex()})
    });