"The canvas has been tainted by cross-origin data" caused by img attribute order on some browsers
See original GitHub issueThe crossOrigin attribute allows images that are loaded from external origins to be used in canvas like the one they were being loaded from the current origin. Using images without CORS approval taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. By loading the canvas from cross origin domain, you are tainting the canvas.
You can prevent this by setting crossorigin="anonymous"
.
However, CRAZILY enough, the order of the attribute on the img
element does matter. I’ve been writing HTML since 2005 and this is the first time I found something like this. The crossorigin
attribute must come before the src
. On Chrome the order did not matter, but on Safari (and other mobile browsers) it solved the problem.
<img src="...image.jpg" crossorigin="anonymous" />
will result in
Unhandled Rejection (SecurityError): The operation is insecure.
while
<img crossorigin="anonymous" src="...image.jpg" />
works just fine.
Writing this down here so it can be added to the documentation and hopefully help someone in the future.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:8
- Comments:7
Top GitHub Comments
What if i’m using it on an image url?
Where would the
crossorigin="anonymous"
go?this also work within order of codes