Use image from remote server

[Dees]

I'm making a tool which can be used for simply edits to a image. The user has the possibility to search for images on Flickr via the Flickr API. When the user selects an image (from Flickr) I have the URL to the image file on Flickr. But I have no clue how to edit a remote image.

I tried loading the image source using AJAX and lots of other stuff. I would say that the most 'obvious solution in my eyes would be something like this:

var effect = "sunrise";
var url = "http://flickr.com/example_url.png"; // Just an example url.

Caman("#slide", url, function () {
    if (effect in this) {
        this.revert();
        this[effect]().render();
    }
});

When using a local image source this example works.

Am I overlooking something?

Thanks in advance!

[Deleted user]

You should check into CORS. This should also be of use: http://stackoverflow.com/questions/12947361/cors-settings-for-images-in-canvas

[Ryan LeFevre]

Yeah, the problem is that, if the image is loaded from a remote source regardless of whether it's via ajax or directly loading the image into an Image object, the canvas becomes "tainted" and no longer editable due to browser security restrictions.

If you need to edit images from a domain other than the one that's hosting the webpage, you need to either proxy the image data through your site's server on the current domain or the remote source needs to have the proper CORS headers (as @jellison linked above).