question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
th0rgallcommented, Feb 2, 2019

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.

2reactions
danielehrhardtcommented, Oct 9, 2017

@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()})
    });
Read more comments on GitHub >

github_iconTop Results From Across the Web

The canvas has been tainted by cross-origin data local image
The reason it affects images, is because malicious individuals discovered that they could use the HTML5 canvas object to copy the contents of ......
Read more >
How to Fix "The canvas has been tainted by cross-origin data ...
In this tutorial, I will discuss how to resolve this issue! Let's use CodePen to create a new "Pen" where we can test...
Read more >
I simply cannot get this to work, no matter the source of the ...
I simply cannot get this to work, no matter the source of the image (The canvas has been tainted by cross-origin data)
Read more >
Allowing cross-origin use of images and canvas - HTML
A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will...
Read more >
Dealing with image CORS error in Chrome, Chromium and ...
Access to image at '${url}' from origin '${origin}' has been ... the browser doesn't send a GET request for the image, but rather...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found