Export Base64 DataURL

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

index.html

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

App.jsx
App.css

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

const editorDefaults = getEditorDefaults();

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);
    });
};

function App() {
    const editorRef = useRef(null);

    const handleEditorProcess = (imageState) => {
        fileToDataURL(imageState.dest).then((dataURL) => {
            console.log(dataURL);
        });
    };

    return (
        <div className="App">
            <PinturaEditor
                ref={editorRef}
                {...editorDefaults}
                src={'image.jpeg'}
                onProcess={handleEditorProcess}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <PinturaEditor
            ref="editor"
            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';





const fileToDataURL =  function(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);
    })

export default {
    name: 'App',

    components: {
        PinturaEditor
    },

    data() {
        return {
            editorDefaults: getEditorDefaults(),
        };
    },

    methods: {
        handleEditorProcess:  function(imageState) {
                    this.fileToDataURL(imageState.dest).then(dataURL => {
                        console.log(dataURL);
                    });
                 },
    }

};
</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';

    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);
        });

    let editorDefaults = getEditorDefaults();

    let editor;

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

        fileToDataURL(imageState.dest).then((dataURL) => {
            console.log(dataURL);
        });
    };
</script>

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

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

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

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

const fileToDataURL = (file: File): string =>
    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);
    });

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    @ViewChild('editor') editor?: any;

    editorDefaults: any = getEditorDefaults();

    handleEditorProcess(imageState: any): void {
        this.fileToDataURL(imageState.dest).then((dataURL) => {
            console.log(dataURL);
        });
    }
}

<pintura-editor
    #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>

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        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);
            });

        var editor = $('#editor').pinturaDefault({ src: 'image.jpeg' });

        editor.on('pintura:process', function (event) {
            const imageState = event.detail;

            fileToDataURL(imageState.dest).then((dataURL) => {
                console.log(dataURL);
            });
        });
    });
</script>