v8.48.3

Image Manipulation Methods

A list of methods to update the image state.

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.
removeImage() Removes the currently loaded 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.

loadImage

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

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<button type="button" id="buttonLoadImage">Load image</button>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const buttonLoadImage = document.querySelector('#buttonLoadImage');

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    buttonLoadImage.addEventListener('click', () => {
        editor.loadImage('my-image.jpeg').then((imageReaderResult) => {
            // Logs loaded image data
            console.log(imageReaderResult);
        });
    });
</script>

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

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

Alternatively update the editor src property to load a new image.

updateImage

Replaces the current image with a new image while retaining history state. We can use this method in situations where we need to modify the source image data.

An example could be removing the image background using a third-party service.

The source image would be sent to the third-party service and then be returned to us, we can then use updateImage to replace the source image with the newly created image.

If the service offers a preview mode we can use updateImagePreview to only replace the preview of the image.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import {
        appendDefaultEditor,
        createNode,
        appendNode,
        findNode,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        willRenderToolbar: (toolbar) => {
            // find the group of buttons to add our custom button to
            const buttonGroup = findNode('alpha-set', toolbar);

            // create a custom button
            const removeBackgroundButton = createNode(
                'Button',
                'remove-background-button',
                {
                    label: 'Remove background',
                    onclick: async () => {
                        // disable input
                        editor.disabled = true;

                        // now loading
                        editor.status = 'Uploading data…';

                        // post image to background removal service
                        const formData = new FormData();
                        formData.append(
                            'image',
                            editor.imageFile,
                            editor.imageFile.name
                        );

                        // request removal of background
                        const newImage = fetch('remove-the-background', {
                            method: 'POST',
                            body: formData,
                        }).then((res) => res.blob());

                        // done loading
                        editor.status = undefined;

                        // update the image with the newly received transparent image
                        editor.updateImage(newImage);
                    },
                }
            );

            // add the button to the toolbar
            appendNode(removeBackgroundButton, buttonGroup);

            // clone the toolbar array when returning to Pintura
            return [...toolbar];
        },
    });
</script>

editImage

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

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<button type="button" id="buttonEditImage">Edit image</button>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const buttonEditImage = document.querySelector('#buttonEditImage');

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    buttonEditImage.addEventListener('click', () => {
        editor.editImage('my-image.jpeg').then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    });
</script>

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

editorInstance
    .editImage('./my-image.jpeg', {
        // Rotate transform instruction
        imageRotation: Math.PI / 2,
    })
    .then((imageWriterResult) => {
        // Image has been generated
    });

processImage

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

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<button type="button" id="buttonProcessImage">Process image</button>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor, processImage } from './pintura.js';

    const buttonProcessImage = document.querySelector('#buttonProcessImage');

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    buttonProcessImage.addEventListener('click', () => {
        editor.processImage().then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    });
</script>

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

editorInstance
    .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.

This loads a new image and processes it with the given instructions

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

When we want to process images without showing the editor interface we can use the exported processImage function.