title: Amazon S3 image, cannot be saved using html5 canvas, gives Tainted Canvases Error
body: <p>Well having problems using canvas to save image in both(Chrome,Firefox and Safari),</p>
  
  <p>When I load a hosted image in html5 canvas, an error is shown in canvas (though only in Chome not Firefox), the image is from <strong>Amazon S3</strong> server:</p>
  
  <p><code>Image from origin 'https://xxx.s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9015' is therefore not allowed access.</code></p>
  
  <p>And when I try to save the canvas as image,</p>
  
  <p><code>Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.</code></p>
  
  <p>Well yes, I have set the CORS config,</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
      &lt;CORSRule&gt;
          &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
          &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
          &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
      &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>img.crossOrigin = 'something'
  </code></pre>
  
  <p>and I looked at <a href="https://github.com/scottjehl/Respond/tree/cross-domain">Respond Proxy Js</a>, but could not understand how to use it.</p>
  
  <p>I have looked through a lot of SO posts and other references but can't solve the problem.Can anyone provide me with any solution.</p>
  
  <p>@Update: if i change the line <code>&lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;</code> => <code>&lt;AllowedOrigin&gt;http://localhost:9015&lt;/AllowedOrigin&gt;</code>, the solutions seems to allow Chrome to save the canvas Image, but the problem is still persistent in Firefox and Safari</p>