Editor methods

These methods are available on each editor instance.

Name Description
editImage(src, options?) Load an image. Returns a Promise that resolves when the image is processed.
loadImage(src, options?) Load an image. Returns a Promise that resolves when the image is loaded.
abortLoadImage() Stop loading the current image.
processImage(src?, options?) Start processing the current image. Or loads a new image and immidiately processes it.
abortProcessImage() Stop processing the current image.
updateImage(src) Updates the current image source while retaining history state. Will also update image preview. Returns a Promise that resolves when the image is loaded.
updateImagePreview(src) Updates the current image preview while retaining history state. Doesn't replace the image source file.
close() Triggers 'close' event. When using openModal this will trigger the modal to hide and auto destruct.
destroy() Destroy editor instance.

The editor instance exposes a history property which we can use to navigate the interaction history programmatically.

Name Description
history.undo() Undo action.
history.redo() Redo action.
history.revert() Revert actions. Will run willRevert.
history.length The total number of history entries.
history.index Current location in history entries.
history.write(imageState?) Write new imageState to history entries, if no imageState is passed this will push the current imageState to the history stack.
history.get() Returns the current array of imageState history entries.
history.set(imageStates[]) Sets the history array, combined with history.get() this enables fully restoring of a previous image editing session.

Instances created with the openEditor JavaScript API have two additional methods.

Name Description
show() Show the editor.
hide() Hide the editor.

loadImage

Loads the supplied image. Returns a Promise that resolves with the imageReaderOutput object when the image has loaded.

editor.loadImage('./my-image.jpeg').then((imageReaderOutput) => {
    // image has loaded
});

As a second parameter we can either pass an imageState object or a set of image transform instructions.

editor
    .loadImage('./my-image.jpeg', {
        // rotate transform instruction
        imageRotation: Math.PI / 2,
    })
    .then((imageReaderOutput) => {
        // image has loaded and has been rotated
    });

editImage

Loads the supplied image. Returns a Promise that resolves with the imageWriterOutput object when the editor has finished processing the image.

editor.editImage('./my-image.jpeg').then((imageWriterOutput) => {
    // image has been edited
});

As a second parameter we can either pass an imageState object or a set of image transform instructions.

editor
    .editImage('./my-image.jpeg', {
        // rotate transform instruction
        imageRotation: Math.PI / 2,
    })
    .then((imageWriterOutput) => {
        // image has been generated
    });

processImage

Manually triggers the editor to start processing the image. Returns a Promise with the imageWriterOutput object when the editor has finished processing the image.

editor.processImage().then((imageWriterOutput) => {
    // current image has been processed
});

First argument can also be an image transform instructions object or imageState.

editor
    .processImage({ imageRotation: Math.PI / 2 })
    .then((imageWriterOutput) => {
        // rotation has been applied to current image and the image has been processed
    });

As a second parameter we can either pass an imageState object or a set of image transform instructions.

editor
    .processImage('./my-image.jpeg', {
        imageRotation: Math.PI / 2,
    })
    .then((imageWriterOutput) => {
        // new image was loaded, rotation has been applied, and the image has been processed
    });