Pintura Image Editor v8.90.0

Showing a preview of the resulting image

Using the web URL.createObjectURL API we can turn a file object into a URL and use it as the source for an image element.

Please note that to prevent memory leaks we have to revoke the object URL with the URL.revokeObjectURL function when we no longer need the image.

index.html

<!DOCTYPE html>

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

<img src="" alt="" />

<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',
        imageWriter: {
            targetSize: {
                width: 256,
                height: 256,
            },
        },
    });

    editor.on('process', (imageState) => {
        document.querySelector('img').src = URL.createObjectURL(
            imageState.dest
        );
    });
</script>

App.jsx
App.css

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

const editorDefaults = getEditorDefaults({
    imageWriter: {
        targetSize: {
            width: 256,
            height: 256,
        },
    },
});

function App() {
    const [editorResult, setEditorResult] = useState(undefined);

    const handleEditorProcess = (imageState) => {
        setEditorResult(URL.createObjectURL(imageState.dest));
    };

    return (
        <div className="App">
            {editorResult && <img alt="" src={editorResult} />}

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

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <img v-if="editorResult" alt="" :src="editorResult" />

        <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 {
            editorResult: undefined,

            editorDefaults: getEditorDefaults({
                imageWriter: {
                    targetSize: {
                        width: 256,
                        height: 256,
                    },
                },
            }),
        };
    },

    methods: {
        handleEditorProcess: function (imageState) {
            this.editorResult = URL.createObjectURL(imageState.dest);
        },
    },
};
</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 editorResult = undefined;

    let editorDefaults = getEditorDefaults({
        imageWriter: {
            targetSize: {
                width: 256,
                height: 256,
            },
        },
    });

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

        editorResult = URL.createObjectURL(imageState.dest);
    };
</script>

<div>
    {#if editorResult} <img alt="" src={editorResult} /> {/if}

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

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

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

import { DomSanitizer } from '@angular/platform-browser';

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private domSanitizer: DomSanitizer) {}

    editorResult?: string = undefined;

    editorDefaults: any = getEditorDefaults({
        imageWriter: {
            targetSize: {
                width: 256,
                height: 256,
            },
        },
    });

    handleEditorProcess(imageState: any): void {
        this.editorResult = <string>(
            this.domSanitizer.bypassSecurityTrustResourceUrl(
                URL.createObjectURL(imageState.dest)
            )
        );
    }
}

<img *ngIf="editorResult" [src]="editorResult" alt="" />

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

<img src="" alt="" />

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageWriter: {
                targetSize: {
                    width: 256,
                    height: 256,
                },
            },
        });

        editor.on('pintura:process', function (event) {
            const imageState = event.detail;
            $('img').attr('src', URL.createObjectURL(imageState.dest));
        });
    });
</script>