v8.81.1

Export Base64 DataURL

We can use the FileReader API to read an image file and convert it to a base64 encoded dataURL.

<!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 fileToDataURL = (file) =>
        new Promise((resolve, reject) => {
            // Encode the file using the FileReader API
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result);
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });

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

    editor.on('process', (imageState) => {
        fileToDataURL(imageState.dest).then((dataURL) => {
            console.log(dataURL);
        });
    });
</script>