v8.90.3

This is the archived documentation for Doka Image Editor v7.

Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.

Show a preview of the 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.

To prevent memory leaks we have to revoke the URL with the URL.revokeObjectURL function when we no longer need the image.

import { openDefaultEditor, createDefaultImageWriter } from './doka.js';

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-image.jpeg',

    // We'll overwrite the image writer so we can resize the image
    imageWriter: createDefaultImageWriter({
        targetSize: {
            width: 256,
            height: 256,
        },
    }),
});

// Wait for image to finish processing and capture output file
editor.on('process', ({ dest }) => {
    const preview = new Image();

    // Here we use URL.createObjectURL to create a URL to the output image
    preview.src = URL.createObjectURL(dest);

    // We'll add it to the <body> for testing purposes
    document.body.appendChild(preview);
});