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 issueNo 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:
- Created 6 years ago
- Reactions:1
- Comments:10 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
It works but I need to invoke the getColor() action a 2 times for it to work, and errors always occur the first time.
@moizmb do it simply like this 😃