v8.69.1

Restore previous image state

To store and restore the editor state of a previous image editing session we can use the history propery.

The current imageState is returned in the 'process' event and in the 'update' event, it can also be requested by accessing the imageState property.

<!DOCTYPE html>

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

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

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

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

    const stringifyImageState = (imageState) => {
        return JSON.stringify(imageState, (k, v) =>
            v === undefined ? null : v
        );
    };

    const parseImageState = (str) => {
        return JSON.parse(str);
    };

    let storedImageState =
        '{"cropLimitToImage": true, "cropAspectRatio": null, ... }';

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

    editor.on('load', () => {
        // Add image state to history stack
        editor.history.write(parseImageState(storedImageState));
    });

    editor.on('process', (res) => {
        // 1. Turn imageState into string, replaces undefined values with null
        const imageStateStr = stringifyImageState(res.imageState);

        // 2. Store imageStateStr on your server for later usage
    });
</script>