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.

<!DOCTYPE html>

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

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

    .pintura-editor {
        height: 600px;

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