v8.77.0

Offering the output image for download

Using the web URL.createObjectURL API we can turn a file object into a URL and offer it as a download to the client.

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

Learn more about downloading files in the browser

<!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 downloadFile = (file) => {
        // Create a hidden link and set the URL using createObjectURL
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = URL.createObjectURL(file);
        link.download = file.name;

        // We need to add the link to the DOM for "click()" to work
        document.body.appendChild(link);
        link.click();

        // To make this work on Firefox we need to wait a short moment before clean up
        setTimeout(() => {
            URL.revokeObjectURL(link.href);
            link.parentNode.removeChild(link);
        }, 0);
    };

    const editor = appendDefaultEditor('#editor', { src: 'image.jpeg' });

    editor.on('process', (imageState) => {
        downloadFile(imageState.dest);
    });
</script>