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?

Community
  • 1
  • 1
WASD42
  • 2,352
  • 6
  • 27
  • 41
  • https://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. – briosheje Apr 23 '14 at 09:25
  • Yeap, I've seen a related question about CORS Enabled Images: http://stackoverflow.com/questions/16869844/html-5-canvas-getimagedata-from-an-externally-loaded-image :/ – WASD42 Apr 23 '14 at 09: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 – briosheje Apr 23 '14 at 09:29
  • You can setup a proxy for the image which would solve this if you cannot make the image CORS enabled. – Selvaraj M A Apr 23 '14 at 09:30
  • 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. – GameAlchemist Apr 23 '14 at 09: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? – markE Apr 23 '14 at 12:37
  • @markE the problem I am solving is kind of an online image editor and I don't like the idea to download each image to my server :/ But it seems to be the only option anyway. – WASD42 Apr 28 '14 at 20:11

1 Answers1

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 = '...';