# Image events

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

| Name                                  | Description                                                        |
| ------------------------------------- | ------------------------------------------------------------------ |
| ['loadstart'](#loadstart)             | Fired when image loading starts.                                   |
| ['loadabort'](#loadabort)             | Fired when image loading is aborted.                               |
| ['loaderror'](#loaderror)             | Fired when an error is thrown during image load.                   |
| ['loadprogress'](#loadprogress)       | Fired when loading of the image progresses.                        |
| ['load'](#load)                       | Fired when an image has successfully loaded.                       |
| ['loadpreview'](#loadpreview)         | Fired when an image preview has been loaded.                       |
| ['update'](#update)                   | Fired when the [imageState](../properties/#imagestate) is updated. |
| ['processstart'](#processstart)       | Fired when processing of an image starts.                          |
| ['processabort'](#processabort)       | Fired when processing of an image is aborted.                      |
| ['processerror'](#processerror)       | Fired when an error is thrown during image processing.             |
| ['processprogress'](#processprogress) | Fired when processing of the image progresses.                     |
| ['process'](#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.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-0)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-0)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-0)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-0)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-0)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-0)

* [index.html](#index-html-panel-0)

```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-jsx-panel-0)
* [App.css](#App-css-panel-0)

```jsx
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;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-0)

```html
<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](#App-svelte-panel-0)

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

```

* [app.component.ts](#app-component-ts-panel-0)
* [app.component.html](#app-component-html-panel-0)
* [app.component.css](#app-component-css-panel-0)
* [app.module.ts](#app-module-ts-panel-0)

```javascript
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 }
    }
}

```

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

```

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

```

```javascript
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](#index-html-panel-0)

```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](../properties/#imagereader) output object.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-1)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-1)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-1)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-1)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-1)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-1)

* [index.html](#index-html-panel-1)

```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-jsx-panel-1)
* [App.css](#App-css-panel-1)

```jsx
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;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-1)

```html
<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](#App-svelte-panel-1)

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

```

* [app.component.ts](#app-component-ts-panel-1)
* [app.component.html](#app-component-html-panel-1)
* [app.component.css](#app-component-css-panel-1)
* [app.module.ts](#app-module-ts-panel-1)

```javascript
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:… }
    }
}

```

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

```

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

```

```javascript
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](#index-html-panel-1)

```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](../properties/#imagestate) is updated.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-2)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-2)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-2)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-2)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-2)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-2)

* [index.html](#index-html-panel-2)

```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-jsx-panel-2)
* [App.css](#App-css-panel-2)

```jsx
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;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-2)

```html
<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](#App-svelte-panel-2)

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

```

* [app.component.ts](#app-component-ts-panel-2)
* [app.component.html](#app-component-html-panel-2)
* [app.component.css](#app-component-css-panel-2)
* [app.module.ts](#app-module-ts-panel-2)

```javascript
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:{…}, … }
    }
}

```

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

```

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

```

```javascript
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](#index-html-panel-2)

```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](../properties/#imagewriter) output object.

* [ ![](/pintura/static/assets/technologies-mono/javascript.svg)JavaScript](#javascript-panel-3)
* [ ![](/pintura/static/assets/technologies-mono/react.svg)React](#react-panel-3)
* [ ![](/pintura/static/assets/technologies-mono/vue.svg)Vue](#vue-panel-3)
* [ ![](/pintura/static/assets/technologies-mono/svelte.svg)Svelte](#svelte-panel-3)
* [ ![](/pintura/static/assets/technologies-mono/angular.svg)Angular](#angular-panel-3)
* [ ![](/pintura/static/assets/technologies-mono/jquery.svg)jQuery](#jquery-panel-3)

* [index.html](#index-html-panel-3)

```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-jsx-panel-3)
* [App.css](#App-css-panel-3)

```jsx
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;

```

```css
.pintura-editor {
    height: 600px;
}

```

* [App.vue](#App-vue-panel-3)

```html
<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](#App-svelte-panel-3)

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

```

* [app.component.ts](#app-component-ts-panel-3)
* [app.component.html](#app-component-html-panel-3)
* [app.component.css](#app-component-css-panel-3)
* [app.module.ts](#app-module-ts-panel-3)

```javascript
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:… }
    }
}

```

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

```

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

```

```javascript
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](#index-html-panel-3)

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

```