search

kennethcachia / background-check

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
http://kennethcachia.com/background-check/
MIT License
3.27k stars 282 forks source link

The canvas has been tainted by cross-origin data. #118

Open Emad-AiDev opened 4 years ago

Emad-AiDev commented 4 years ago

Hello,

Could you please check the error ? Is that something possible to resolve. I use CDN and I guess that would be the issue.

background-check.min.js?ver=5.3:5 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

ShinichiroMike commented 3 years ago

Same here

enoversum commented 3 years ago

Would love to know as well, also using a CDN here.

phanmn commented 3 years ago

I add the list[e].img.crossOrigin = 'anonymous'; to solve this issue image

enoversum commented 3 years ago

I add the list[e].img.crossOrigin = 'anonymous'; to solve this issue image

Just wondering why you have a different row number where your code goes (mine is 165 on script version 1.2.2), but unfortunately, it doesn't seem to work. Still reporting the same ol' error.

phanmn commented 3 years ago

@enoversum I formatted code for my typescript project. My image url has access-control-allow-origin: * this line at response header and my image is a css background url

enoversum commented 3 years ago

@enoversum I formatted code for my typescript project. My image url has access-control-allow-origin: * this line at response header and my image is a css background url

Ah, alright, so different scenario from just including the script in a page, pointing at CDN images.

iamrobert commented 3 years ago

I noticed that when I lazyloaded the background-check js file I got this error. So when I initiated it on every page it disappeared.