v8.88.3

Image events

A list of events which we can use to respond to image state changes.

Name Description
'loadstart' Fired when image loading starts.
'loadabort' Fired when image loading is aborted.
'loaderror' Fired when an error is thrown during image load.
'loadprogress' Fired when loading of the image progresses.
'load' Fired when an image has successfully loaded.
'loadpreview' Fired when an image preview has been loaded.
'update' Fired when the imageState is updated.
'processstart' Fired when processing of an image starts.
'processabort' Fired when processing of an image is aborted.
'processerror' Fired when an error is thrown during image processing.
'processprogress' Fired when processing of the image progresses.
'process' Fired when an image has been processed.

loadstart

Fired when an image starts loading.

loadabort

Fired when the image load is aborted. For example when a new image is set while another image is still loading.

loaderror

Fired when the image load process throws an error.

loadprogress

Fired when the image load process makes progress. Receives the task progress event. The task progress event has the following properties.

Name Description
index The index of the task in the processing array.
task The name of the task in the processing array.
taskProgress The current progress of the task between 0 and 1.
taskLengthComputable Is the length of this task computable, is true when the task length will be updated, the editor will show a progress indicator. If is false the editor will show a spinner.
timeStamp The time stamp of the event.

Each task will fire at least a progress event with taskProgress set to 0 and a progress event with taskProgress set to 1. The 0 progress event will always have taskLengthComputable set to false as the editor doesn't know if the length will be computable before the task runs. The taskLengthComputable of the final progress event will either be false or true depending on if progress events were fired.

<!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 editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    editor.on('loadprogress', (task) => {
        console.log(task);
        // logs: { index: 0, task: 'any-to-file', taskProgress: 0, taskLengthComputable: false, timeStamp: 1614589213257 }
    });
</script>

load

Fired when the src image has finished loading, receives the imageReader output object.

<!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 editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    editor.on('load', (imageReaderResult) => {
        console.log(imageReaderResult);
        // logs: { src:…, dest:… , size:… }
    });
</script>

loadpreview

Fired when the preview image has loaded or is updated.

update

Fired when the internal imageState is updated.

<!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 editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    editor.on('update', (imageState) => {
        console.log(imageState);
        // logs: { cropLimitToImage:…, cropMinSize:{…} , cropMaxSize:{…}, … }
    });
</script>

processstart

Fired when an image starts processing.

processabort

Fired when image processing is aborted.

processerror

Fired when the image processing process throws an error.

processprogress

Fired when the image processing process makes progress.

process

Fired when the image has finished processing, receives the imageWriter output object.

<!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 editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    editor.on('process', (imageWriterResult) => {
        console.log(imageWriterResult);
        // logs: { src:…, dest:… , imageState:…, store:… }
    });
</script>