0

I have an image loaded into <img src="https://www.someotherdomain.com/myimg.jpg"> in the document and I am wanting to use JS to determine how "bright" on average the image is (to adjust the colour of overlay elements to improve visibility.

The answer here: Image Dark/Light Detection Client Sided Script works just fine...except for the fact that it doesn't work on cross origin resources. The images I will be needing to determine brightness for could be from any domain and I don't have control over setting the necessary CORS headers on the server to be passed back along with the response to make it easy for JS to use the image.

Is there some way to get the brightness of an image from an external domain without having to worry about CORS?

Community
  • 1
  • 1
abagshaw
  • 6,162
  • 4
  • 38
  • 76

1 Answers1

0

Not directly: cross-domain images not loaded over CORS (with the crossorigin attribute) are consider to be "tainted", and anywhere it is drawn (such as on a canvas) will also become tainted. You can't read image data from a tainted canvas, which is why the method described in the linked answer (which uses getImageData to read image data) won't work. MDN has some more information on tainted images.

The reasoning behind this is the same as with any other CORS-restricted resource: You shouldn't be able to get information from other domains without their explicit permission (through the use of CORS headers), since the remote domain may never have intended such images to be accessed by other domains.

For example, an image sharing service could allow only access to private images for logged-in users; if this restriction did not exist, any website with the URL for such an image could make a request for that image as the logged-in user, then read the image, upload and publish it on their own site, which would definitely be a privacy issue.

You can work around this by using a CORS proxy, which routes your requests through a server that adds the CORS headers automatically. You can use a public service such as crossorigin.me (where you just add https://crossorigin.me/ before the URL), or you can run your own CORS proxy if you're uncomfortable sending requests through an unknown third party.

Frxstrem
  • 38,761
  • 9
  • 79
  • 119
  • Thanks - I've seen this CORS proxy idea before and I'd really not like to go down that route as the images are potentially quite large and there are size restrictions on that specific proxy (and I don't want to make my own) - also speed is an issue. I was just wondering if there were any clever workarounds to this issue - or maybe some way to use CSS blending modes to uniformly change the color of somelelement depending on it's background (to enhance visibility). – abagshaw Apr 02 '17 at 02:32
  • @abagshaw As I pointed out, you can host your own CORS proxy, but if you're not willing/able to use that then there are—quite intentionally—no scriptable workarounds for this except by using proxies. I also doubt that there's something like that in CSS (but I'm definitely no expert on CSS, so I'm not sure about that). – Frxstrem Apr 02 '17 at 02:35