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 281 forks source link

CDN Support #39

Closed anteksiler closed 10 years ago

anteksiler commented 10 years ago

Is there anyway we can run images from a CDN without getting the cross origin error?

kennethcachia commented 10 years ago

You must serve the images with an appropriate Access-Control-Allow-Origin header.

Example.

anteksiler commented 10 years ago

So this change must be done on cdn servers?

I am using wpengine.com and they work with maxcdn. I'll email them and check if they can make cdn configuration changes per client.

kennethcachia commented 10 years ago

Yes. Let me know if it works!

anteksiler commented 10 years ago

Hi @kennethcachia I did add CORS headers to the CDN we are using but still getting the error. You can check our demo here: http://north.fuelthemes.net/

curl -I http://cdn.fuelthemes.net/wp-content/uploads/2014/09/bg.jpg returns: Content-Type: image/jpeg Content-Length: 51637 Connection: keep-alive Last-Modified: Sat, 06 Sep 2014 10:43:23 GMT X-Type: static/known Cache-Control: public, max-age=2592000 Vary: Accept-Encoding Access-Control-Allow-Origin: Accept-Ranges: bytes Server: NetDNA-cache/2.2 Access-Control-Allow-Origin: X-Cache: MISS

kennethcachia commented 10 years ago

Check this out: http://jsfiddle.net/w7yb1km1/

It works when you add the crossorigin attribute to the image. More details and demo: http://www.kennethcachia.com/background-check/cross-origin.html

anteksiler commented 10 years ago

Is there anyway we can set this property inside BC source file? I tried img.crossOrigin('*'); but didnt work

anteksiler commented 10 years ago

This is what I used: list[e].img.setAttribute('crossorigin', 'anonymous');

also tried

list[e].img.setAttribute('crossorigin', '');

kennethcachia commented 10 years ago

Updated.

Works if we set the crossorigin attribute first and then load the image. Can you use this approach?