Question

I’m working on an image mashup web app.
I want to avoid flash or other client hassles and just do it pure HTML+javascript.

To keep it light, I’d like to do the work on the client side in Javascript, and have it just push a final saved image to the server.

I thought after reading about the wonders of HTML5 and Canvas I’d be able to use that.

Trouble is though:

1. If I use the new drag and drop feature of HTML5 for the user to pass a local image to the app and then paint it to the canvas, then …
   the canvas get’s dirty and it throws a security exception if I try to save the image data.
2. If I use an API like Bing Image search to find images for the user and paint them to the canvas, then …
   the canvas gets dirty and it throws a security exception if I try to save the image data.

The only work around I can think is to have the server act as a kind of proxy and have it relay every image that is worked with to the client – but that defeats the purpose of going client side.

Is there any other method I’m not thinking of, or is pure HTML5 + JS at the client side just not an option for this use case?

Answer 1

The security exception is thrown because you are using images from different domain (local or Bing in your case), you should give to the user the ability to upload the selected images on your server and then work with them in canvas. For images from internet storages you can make something like a proxy to show them on the frontend, images from user’s pc should always be uploaded. There is no other way to avoid XSS exceptions as far as I know.

P.S. there is a good article about HTML5 canvas image restrictions here: http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules