HTML5 Canvas getImageData and Same Origin Policy

Question

I have a site running at pixie.strd6.com and images hosted through Amazon S3 with a CNAME for images.pixie.strd6.com.

I would like to be able to draw these images to

Answer 1

Just bumped into the same problem. I found out about CORS that might be helpful.

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#14

It didn't work for me since I'm trying to manipulate an image from Flickr. So, I'm still looking for the solution.

Answer 2

One possible solution is to use nginx to act as a proxy. Here is how to configure urls going to http://pixie.strd6.com/s3/ to pass on through to S3, but the browser can still believe that it is non-cross domain.

location /s3/ {
  proxy_pass http://images.pixie.strd6.com/;
}

Answer 3

This behavior is by-design. Per the HTML5 spec, as soon as you draw a cross-origin image to a canvas, it is dirty and you can no longer read the pixels. Origin-matching compares the scheme, fully-qualified host, and in non-IE browsers, the port.