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.

index.html

<!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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const handleEditorLoadprogress = (task) => {
        console.log(task);
        // logs: { index: 0, task: 'any-to-file', taskProgress: 0, taskLengthComputable: false, timeStamp: 1614589213257 }
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onLoadprogress={handleEditorLoadprogress}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:loadprogress="handleEditorLoadprogress($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {
        handleEditorLoadprogress: function (task) {
            console.log(task);
            // logs: { index: 0, task: 'any-to-file', taskProgress: 0, taskLengthComputable: false, timeStamp: 1614589213257 }
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const handleEditorLoadprogress = (event) => {
        const task = event.detail;

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

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        on:loadprogress={handleEditorLoadprogress}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    handleEditorLoadprogress(task: any): void {
        console.log(task);
        // logs: { index: 0, task: 'any-to-file', taskProgress: 0, taskLengthComputable: false, timeStamp: 1614589213257 }
    }
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (loadprogress)="handleEditorLoadprogress($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

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

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        editor.on('pintura:loadprogress', function (event) {
            const task = event.detail;

            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.

index.html

<!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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const handleEditorLoad = (imageReaderResult) => {
        console.log(imageReaderResult);
        // logs: { src:…, dest:… , size:… }
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onLoad={handleEditorLoad}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:load="handleEditorLoad($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {
        handleEditorLoad: function (imageReaderResult) {
            console.log(imageReaderResult);
            // logs: { src:…, dest:… , size:… }
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const handleEditorLoad = (event) => {
        const imageReaderResult = event.detail;

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

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        on:load={handleEditorLoad}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    handleEditorLoad(imageReaderResult: any): void {
        console.log(imageReaderResult);
        // logs: { src:…, dest:… , size:… }
    }
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (load)="handleEditorLoad($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

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

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        editor.on('pintura:load', function (event) {
            const imageReaderResult = event.detail;

            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.

index.html

<!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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const handleEditorUpdate = (imageState) => {
        console.log(imageState);
        // logs: { cropLimitToImage:…, cropMinSize:{…} , cropMaxSize:{…}, … }
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onUpdate={handleEditorUpdate}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:update="handleEditorUpdate($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {
        handleEditorUpdate: function (imageState) {
            console.log(imageState);
            // logs: { cropLimitToImage:…, cropMinSize:{…} , cropMaxSize:{…}, … }
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const handleEditorUpdate = (event) => {
        const imageState = event.detail;

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

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        on:update={handleEditorUpdate}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    handleEditorUpdate(imageState: any): void {
        console.log(imageState);
        // logs: { cropLimitToImage:…, cropMinSize:{…} , cropMaxSize:{…}, … }
    }
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (update)="handleEditorUpdate($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

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

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        editor.on('pintura:update', function (event) {
            const imageState = event.detail;

            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.

index.html

<!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>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { PinturaEditor } from '@pqina/react-pintura';
import { getEditorDefaults } from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const handleEditorProcess = (imageWriterResult) => {
        console.log(imageWriterResult);
        // logs: { src:…, dest:… , imageState:…, store:… }
    };

    return (
        <div className="App">
            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onProcess={handleEditorProcess}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:process="handleEditorProcess($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {
        handleEditorProcess: function (imageWriterResult) {
            console.log(imageWriterResult);
            // logs: { src:…, dest:… , imageState:…, store:… }
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import { getEditorDefaults } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorDefaults = getEditorDefaults();

    const handleEditorProcess = (event) => {
        const imageWriterResult = event.detail;

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

<div>
    <PinturaEditor
        {...editorDefaults}
        src={'image.jpeg'}
        on:process={handleEditorProcess}
    />
</div>

<style>
    div :global(.pintura-editor) {
        height: 600px;
    }
</style>

import { Component } from '@angular/core';

import { getEditorDefaults } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    editorDefaults: any = getEditorDefaults();

    handleEditorProcess(imageWriterResult: any): void {
        console.log(imageWriterResult);
        // logs: { src:…, dest:… , imageState:…, store:… }
    }
}

<pintura-editor
    [options]="editorDefaults"
    src="image.jpeg"
    (process)="handleEditorProcess($event)"
></pintura-editor>

::ng-deep .pintura-editor {
    height: 600px;
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularPinturaModule } from '@pqina/angular-pintura';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AngularPinturaModule],
    exports: [AppComponent],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

index.html

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

<script src="./jquery.js"></script>
<script src="./jquery-pintura/useEditorWithJQuery-iife.js"></script>
<script src="./pintura/pintura-iife.js"></script>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        editor.on('pintura:process', function (event) {
            const imageWriterResult = event.detail;

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