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.

index.html

<!DOCTYPE html>

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

<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('image.jpeg').then((imageReaderResult) => {
            // Logs loaded image data
            console.log(imageReaderResult);
        });
    });
</script>

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    const editorRef = useRef(null);

    const handleButtonClick = () => {
        editorRef.current.editor
            .loadImage('image.jpeg')
            .then((imageReaderResult) => {
                // Logs loaded image data
                console.log(imageReaderResult);
            });
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Load image
            </button>

            <PinturaEditor
                ref={editorRef}
                {...editorDefaults}
                src={'image.jpeg'}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Load image
        </button>

        <PinturaEditor ref="editor" v-bind="editorDefaults" src="image.jpeg" />
    </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: {
        handleButtonClick: function () {
            this.$refs.editor.editor
                .loadImage('image.jpeg')
                .then((imageReaderResult) => {
                    // Logs loaded image data
                    console.log(imageReaderResult);
                });
        },
    },
};
</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();

    let editor;

    const handleButtonClick = () => {
        editor.loadImage('image.jpeg').then((imageReaderResult) => {
            // Logs loaded image data
            console.log(imageReaderResult);
        });
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Load image</button>

    <PinturaEditor bind:this={editor} {...editorDefaults} src={'image.jpeg'} />
</div>

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

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

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

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

    @ViewChild('editor') editor?: any;

    editorDefaults: any = getEditorDefaults();

    handleButtonClick(): void {
        this.editor.editor.loadImage('image.jpeg').then((imageReaderResult) => {
            // Logs loaded image data
            console.log(imageReaderResult);
        });
    }
}

<button #buttonLoadImage type="button" (click)="handleButtonClick()">
    Load image
</button>

<pintura-editor
    #editor
    [options]="editorDefaults"
    src="image.jpeg"
></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>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var buttonLoadImage = $('#buttonLoadImage');

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

        buttonLoadImage.on('click', function () {
            $(editor)
                .pintura('loadImage', '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('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.

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

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { useRef } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import {
    getEditorDefaults,
    createNode,
    appendNode,
    findNode,
} from '@pqina/pintura';

const editorDefaults = getEditorDefaults();

function App() {
    const editorRef = useRef(null);

    const 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
                    editorRef.current.editor.disabled = true;

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

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

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

                    // done loading
                    editorRef.current.editor.status = undefined;

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

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

        // clone the toolbar array when returning to Pintura
        return [...toolbar];
    };

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

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            ref="editor"
            v-bind="editorDefaults"
            src="image.jpeg"
            :willRenderToolbar="willRenderToolbar"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import {
    getEditorDefaults,
    createNode,
    appendNode,
    findNode,
} from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

            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
                            this.$refs.editor.editor.disabled = true;

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

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

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

                            // done loading
                            this.$refs.editor.editor.status = undefined;

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

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

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

    methods: {},
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

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

    let editorDefaults = getEditorDefaults();

    let editor;

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

<div>
    <PinturaEditor
        bind:this={editor}
        {...editorDefaults}
        src={'image.jpeg'}
        {willRenderToolbar}
    />
</div>

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

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

import {
    getEditorDefaults,
    createNode,
    appendNode,
    findNode,
    PinturaNode,
} from '@pqina/pintura';

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

    editorDefaults: any = getEditorDefaults();

    willRenderToolbar = (toolbar: PinturaNode[]): PinturaNode[] => {
        // 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
                    this.editor.editor.disabled = true;

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

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

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

                    // done loading
                    this.editor.editor.status = undefined;

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

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

        // clone the toolbar array when returning to Pintura
        return [...toolbar];
    };
}

<pintura-editor
    #editor
    [options]="editorDefaults"
    src="image.jpeg"
    [willRenderToolbar]="willRenderToolbar"
></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 { createNode, appendNode, findNode } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            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).pintura('disabled', true);

                            // now loading
                            $(editor).pintura('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).pintura('status', undefined);

                            // update the image with the newly received transparent image
                            $(editor).pintura('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.

index.html

<!DOCTYPE html>

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

<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('image.jpeg').then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    });
</script>

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    const editorRef = useRef(null);

    const handleButtonClick = () => {
        editorRef.current.editor
            .editImage('image.jpeg')
            .then((imageWriterResult) => {
                // Logs resulting image
                console.log(imageWriterResult);
            });
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Edit image
            </button>

            <PinturaEditor
                ref={editorRef}
                {...editorDefaults}
                src={'image.jpeg'}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Edit image
        </button>

        <PinturaEditor ref="editor" v-bind="editorDefaults" src="image.jpeg" />
    </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: {
        handleButtonClick: function () {
            this.$refs.editor.editor
                .editImage('image.jpeg')
                .then((imageWriterResult) => {
                    // Logs resulting image
                    console.log(imageWriterResult);
                });
        },
    },
};
</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();

    let editor;

    const handleButtonClick = () => {
        editor.editImage('image.jpeg').then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Edit image</button>

    <PinturaEditor bind:this={editor} {...editorDefaults} src={'image.jpeg'} />
</div>

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

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

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

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

    @ViewChild('editor') editor?: any;

    editorDefaults: any = getEditorDefaults();

    handleButtonClick(): void {
        this.editor.editor.editImage('image.jpeg').then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    }
}

<button #buttonEditImage type="button" (click)="handleButtonClick()">
    Edit image
</button>

<pintura-editor
    #editor
    [options]="editorDefaults"
    src="image.jpeg"
></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>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var buttonEditImage = $('#buttonEditImage');

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

        buttonEditImage.on('click', function () {
            $(editor)
                .pintura('editImage', '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('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.

index.html

<!DOCTYPE html>

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

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

function App() {
    const editorRef = useRef(null);

    const handleButtonClick = () => {
        editorRef.current.editor.processImage().then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    };

    return (
        <div className="App">
            <button type="button" onClick={handleButtonClick}>
                Process image
            </button>

            <PinturaEditor
                ref={editorRef}
                {...editorDefaults}
                src={'image.jpeg'}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <button type="button" v-on:click="handleButtonClick($event)">
            Process image
        </button>

        <PinturaEditor ref="editor" v-bind="editorDefaults" src="image.jpeg" />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { processImage, getEditorDefaults } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

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

    methods: {
        handleButtonClick: function () {
            this.$refs.editor.editor
                .processImage()
                .then((imageWriterResult) => {
                    // Logs resulting image
                    console.log(imageWriterResult);
                });
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

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

    let editorDefaults = getEditorDefaults();

    let editor;

    const handleButtonClick = () => {
        editor.processImage().then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    };
</script>

<div>
    <button type="button" on:click={handleButtonClick}>Process image</button>

    <PinturaEditor bind:this={editor} {...editorDefaults} src={'image.jpeg'} />
</div>

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

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

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

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

    @ViewChild('editor') editor?: any;

    editorDefaults: any = getEditorDefaults();

    handleButtonClick(): void {
        this.editor.editor.processImage().then((imageWriterResult) => {
            // Logs resulting image
            console.log(imageWriterResult);
        });
    }
}

<button #buttonProcessImage type="button" (click)="handleButtonClick()">
    Process image
</button>

<pintura-editor
    #editor
    [options]="editorDefaults"
    src="image.jpeg"
></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>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { processImage } = $.fn.pintura;

        var buttonProcessImage = $('#buttonProcessImage');

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

        buttonProcessImage.on('click', function () {
            $(editor)
                .pintura('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('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.