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

[teenangst]

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?

[teenangst]

Update, just built a php ajax api for this which will be more stable and faster anyway; this is no longer urgent.

[danielehrhardt]

Can you send you code?

[moizmb]

@teenangst Could you post a snippet of the code that worked for you

[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()})
    });

[shuiRong]

I have the same error.(not on a http-server) It's ok , if i use http-server to run theindex.html.

[AlfredJKwack]

Ahem,

Browsers these days don't like you loading stuff straight from the filesystem. Here's a good explanation of CORS if you want to know more.

Try this or your local equivalent instead:

[me@macOs]$ cd ~/GitHubRepos/color-thief
[me@macOs]$ python -m SimpleHTTPServer 8000
[me@macOs]$ open http://localhost:8000

Good luck.

[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.

[AlfredJKwack]

@th0rgall

Not sure if that would work with data urls.

if ( img.substring(0,5) !== 'data:' )
      img.crossOrigin = "Anonymous";

[AntiMoron]

Same here.

[lokesh]

Closing out the issue. I've added info on CORs issues to the demo page and fleshed out the docs: https://lokeshdhakar.com/projects/color-thief/#faq

If you are having trouble using the script still, check out the instructions on getting support: https://lokeshdhakar.com/projects/color-thief/#support