StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Generally you cannot read image data from <a href="https://developer.mozilla.org/en/CORS_Enabled_Image" rel="nofollow">other domains</a>. It violates the Cross-Origin Resource Sharing (<a href="http://www.w3.org/TR/cors/" rel="nofollow">CORS</a>) security model. That said you can get around this issue by having each subdomain use a <a href="https://developer.mozilla.org/En/HTTP_access_control#Access-Control-Allow-Origin" rel="nofollow">HTTP access control header</a> (here's an <a href="http://xavi.co/articles/get-around-cross-domain-restrictions" rel="nofollow">example</a> with <a href="http://nodejs.org" rel="nofollow">node.js</a>) as well as setting the <a href="https://developer.mozilla.org/en/HTML/Element/img#attr-crossorigin" rel="nofollow"><code>crossorigin</code></a> attribute to <code>use-credentials</code> on each image tag. Note that not all browsers support the <code>crossorigin</code> attribute.</p> <p>Ultimately, both the server and client have to opt-in to get around CORS security for images.</p> <p>Another work-around entails using a jquery plugin called <a href="http://www.maxnov.com/getimagedata/" rel="nofollow"><code>$.getImageData</code></a>. Under the covers this plugin uses a third party service called <a href="http://img-to-json.appspot.com" rel="nofollow">img-to-json</a> and <a href="http://json-p.org/" rel="nofollow">JSONP</a> to get around the security issues. Here's a concrete example of how to use img-to-json:</p> <pre><code>"//img-to-json.appspot.com/?url=" + escape(img_url) + "&callback=" + callback </code></pre> <p>Basically, the service takes two parameters: the URL of the image you're downloading (which needs to be URL escaped), and the name of the callback you want executed when the image is done loading. The callback is passed an objected with the <a href="https://developer.mozilla.org/en/data_URIs" rel="nofollow">data url</a> version of the image as well as some metadata such as the height and width of the image.</p> <p>Also, note the URL above is an example of a <a href="http://paulirish.com/2010/the-protocol-relative-url/" rel="nofollow">protocol relative</a> URL (i.e. it begins with <code>//</code>), which means it'll worked on both <code>http</code> or <code>https</code> pages.</p> <p>Hope this helps.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload