1

Suppose we have the HTML page with some JPEG images being served from external domains. The goal is to analyze some color data of that images using JavaScript.

The common approach to this problem is to "convert" image to HTML canvas and access color data (see https://stackoverflow.com/a/8751659/581204):

var img = $('#my-image')[0]; var canvas = $('<canvas/>')[0]; canvas.width = img.width; canvas.height = img.height; canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); var pixelInfo = canvas.getContext('2d').getImageData(xOffset, yOffset, 1, 1).data;

But this technique would not work with externally loaded images as trying to access canvas data with external image will raise the security error:

SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Is there any other way to access color data for external images or this is a dead end?

Improve this question
7
  • developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image :/.. Unless the image is cross-origin enabled you can't do really much, as far as I know. There are similar cases on stackoverflow though and, unless you're the owner of the image, you really can't change this parameter or work around it. Commented Apr 23, 2014 at 9:25
  • Yeap, I've seen a related question about CORS Enabled Images: stackoverflow.com/questions/16869844/… :/ Commented Apr 23, 2014 at 9:27
  • 1
    Then I'm sorry but, unless you're the owner of the image (that was my case, though) you can't really do much apart from asking to the owner of the image to enable cross-origin.. Let's see, however, if someone else has a solution Commented Apr 23, 2014 at 9:29
  • 1
    the only way i see is : use an XMLHttpRequest to retrieve the file + decode the file by hand. Much easier/faster with png, and might be too slow for jpg depending on file size. Commented Apr 23, 2014 at 9:44
  • 1
    As you describe your need, it's a dead end. You could have your server download the images and then serve them. This might/might not satisfy CORS depending on what authorship data is embedded in the image types you're trying to access. Regarding, XMLHttpRequests: they are also subject to CORS restrictions and won't help with accessing cross-domain images directly on the client. If the image population is known, why not load the images now onto your server and have this headache go away? Commented Apr 23, 2014 at 12:37

1 Answer 1

Reset to default
1

You can set up a page proxy on your own server.

Diagram

A page proxy is simply a page which fetches the image on the url you want to retrieve to server, then forwards it to you from that page instead. This way the image becomes part of the same origin as the script is running on.

This will work for PHP, .Net, cgi etc. but you would to make the page and its code. You will most likely find plenty of examples for this out there (google it for your specific platform).

If you don't have access to do this then there are only these options left:

  • Move/copy the image manually to your page's origin
  • Request CORS usage (which require server to have this enabled)
  • If server doesn't, ask the owner kindly to enable this for your domain and then do CORS request

A CORS request is done by specifying either the attribute in an image's tag:

<img src="..." crossOrigin="anonymous">

or property in JavaScript:

 var img = new Image; img.onload = ... img.crossOrigin = ''; img.src = '...';
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.