Well having problems using canvas to save image in both(Chrome,Firefox and Safari),

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 Amazon S3 server:

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.

And when I try to save the canvas as image,

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Well yes, I have set the CORS config,

and

and I looked at Respond Proxy Js, but could not understand how to use it.

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.

@Update: if i change the line <AllowedOrigin>*</AllowedOrigin> => <AllowedOrigin>http://localhost:9015</AllowedOrigin>, the solutions seems to allow Chrome to save the canvas Image, but the problem is still persistent in Firefox and Safari

In firefox and IE your need to look like

Default

<img src="https://platform3-preit-image.s3.amazonaws.com/components/fireside2.png" crossOrigin="anonymous" class="draggable-image" />

1 2

In chrome it need to be without crossOrigin. If you include crossOrigin attribute in chrome it will fail.

Default

<img src="https://platform3-preit-image.s3.amazonaws.com/components/fireside2.png" class="draggable-image" />

1 2

So basically you need to render two different html output base on browser.