Question

I’m writing an app where a user can upload an image, draw on it and save the result. I’m trying to accomplish this by using a canvas element and use the uploaded image as its background. I’m retrieving the image through ImageService. Here’s what the client-side code looks like for initializing the canvas:

var image = new Image();
image.src = "http://some.google.domain.com/foobar123";
var ctx = canvas.getContext('2d')
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};

Now the user can draw stuff on the image.

Then when the user wants to save the image, I call:

canvas.toDataURL("image/png")

This gives this error in Chrome:

Error: SecurityError: DOM Exception 18.
"Error: An attempt was made to break through the security policy of the user agent."

I’m assuming Chrome doesn’t like it because the image is served from some google domain, which is different than my app engine app’s domain.

Is there a work around for this?

Thanks in advance.

Answer 1

As a work around, I’m using BlobstoreService to serve the image data now instead of ImageService. This approach serves images from the same domain as my app, but you lose all the benefits of using Google’s static image serving infrastructure.