Replace image with Aviary/Creative SDK Image Editor

Question

I'm using the Aviary image editor for my project. Everything is working, but not the "save" button.

I can't save or replace the current editing image, I get only an amazon path to the image, where I can open it.

The support doesn't really help and it takes weeks to get an answer.

I am working with the standard example

Answer 1

Aviary replaced by the Creative SDK Image Editor

Please note that Aviary was acquired by Adobe in 2014 and is now part of The Creative SDK. All versions of Aviary are now outdated and have been replaced by the Creative SDK Image Editor.

Receiving the edited image

As you note, when you click Save, you will receive the edited image in the form of an Amazon URL. This link only exists on the Amazon server for 72 hours, so you will want to do something with it.

Replacing an img element's source

As a basic example, you can use the returned Amazon URL to replace an image element's source inside of the Aviary.Feather configuration object's onSave method.

var featherEditor = new Aviary.Feather({
    apiKey: '<YOUR_KEY_HERE>',
    onSave: function(imageID, newURL) {
        currentImage.src = newURL; // `currentImage` is a DOM image element
        featherEditor.close();
    },
    onError: function(errorObj) {
        console.log(errorObj.code);
        console.log(errorObj.message);
        console.log(errorObj.args);
    }
});

Inside of onSave, we're saying here to replace currentImage's source with the newURL that comes back from Amazon.

Somewhere in your script, you would need to define what this currentImage is. For example, if you are using jQuery, you might write something like:

var currentImage = $('#editable-image')[0];

Note that we use the 0th element here in order to get the actual DOM element, not the jQuery object.

This is just one example, but you could do it several ways.

Example repo

Have a look at this example repo using jQuery for further details.