Pintura Image Editor v8.78.1

Loading and editing HEIC/HEIF images

We can use the preprocessImageFile property on the createDefaultImageReader function to add custom image loader logic.

Using a third-party library called heic2any we can add HEIC image support to the editor.

index.html

<!DOCTYPE html>

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

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

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

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

<script type="module">
    import {
        appendDefaultEditor,
        processImage,
        blobToFile,
    } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',
        imageReader: {
            preprocessImageFile: async (file, options, onprogress) => {
                // If is not of type HEIC we skip the file
                if (!/heic/.test(file.type)) return file;

                // Let's turn the HEIC image into JPEG so the browser can read it
                const blob = await heic2any({
                    blob: file,
                    toType: 'image/jpeg',
                    quality: 0.94,
                });

                // The editor expects a File so let's convert our Blob
                return blobToFile(blob, file.name);
            },
        },
    });

    editor.on('process', (imageState) => {
        document.querySelector('img').src = URL.createObjectURL(
            imageState.dest
        );
    });
</script>

App.jsx
App.css

import '@pqina/pintura/pintura.css';
import './App.css';
import { useState } from 'react';
import { PinturaEditor } from '@pqina/react-pintura';
import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura';

const editorDefaults = getEditorDefaults({
    imageReader: {
        preprocessImageFile: async (file, options, onprogress) => {
            // If is not of type HEIC we skip the file
            if (!/heic/.test(file.type)) return file;

            // Let's turn the HEIC image into JPEG so the browser can read it
            const blob = await heic2any({
                blob: file,
                toType: 'image/jpeg',
                quality: 0.94,
            });

            // The editor expects a File so let's convert our Blob
            return blobToFile(blob, file.name);
        },
    },
});

function App() {
    const [editorResult, setEditorResult] = useState(undefined);

    const handleEditorProcess = (imageState) => {
        setEditorResult(URL.createObjectURL(imageState.dest));
    };

    return (
        <div className="App">
            {editorResult && <img alt="" src={editorResult} />}

            <PinturaEditor
                {...editorDefaults}
                src={'image.jpeg'}
                onProcess={handleEditorProcess}
            />
        </div>
    );
}

export default App;

.pintura-editor {
    height: 600px;
}

App.vue

<template>
    <div>
        <img v-if="editorResult" alt="" :src="editorResult" />

        <PinturaEditor
            v-bind="editorDefaults"
            src="image.jpeg"
            v-on:pintura:process="handleEditorProcess($event)"
        />
    </div>
</template>
<script>
import { PinturaEditor } from '@pqina/vue-pintura';
import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura';

export default {
    name: 'App',

    components: {
        PinturaEditor,
    },

    data() {
        return {
            editorResult: undefined,

            editorDefaults: getEditorDefaults({
                imageReader: {
                    preprocessImageFile: async (file, options, onprogress) => {
                        // If is not of type HEIC we skip the file
                        if (!/heic/.test(file.type)) return file;

                        // Let's turn the HEIC image into JPEG so the browser can read it
                        const blob = await heic2any({
                            blob: file,
                            toType: 'image/jpeg',
                            quality: 0.94,
                        });

                        // The editor expects a File so let's convert our Blob
                        return blobToFile(blob, file.name);
                    },
                },
            }),
        };
    },

    methods: {
        handleEditorProcess: function (imageState) {
            this.editorResult = URL.createObjectURL(imageState.dest);
        },
    },
};
</script>
<style>
@import '@pqina/pintura/pintura.css';

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

App.svelte

<script>
    import { PinturaEditor } from '@pqina/svelte-pintura';
    import {
        processImage,
        getEditorDefaults,
        blobToFile,
    } from '@pqina/pintura';
    import '@pqina/pintura/pintura.css';

    let editorResult = undefined;

    let editorDefaults = getEditorDefaults({
        imageReader: {
            preprocessImageFile: async (file, options, onprogress) => {
                // If is not of type HEIC we skip the file
                if (!/heic/.test(file.type)) return file;

                // Let's turn the HEIC image into JPEG so the browser can read it
                const blob = await heic2any({
                    blob: file,
                    toType: 'image/jpeg',
                    quality: 0.94,
                });

                // The editor expects a File so let's convert our Blob
                return blobToFile(blob, file.name);
            },
        },
    });

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

        editorResult = URL.createObjectURL(imageState.dest);
    };
</script>

<div>
    {#if editorResult} <img alt="" src={editorResult} /> {/if}

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

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

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

import { DomSanitizer } from '@angular/platform-browser';

import { processImage, getEditorDefaults, blobToFile } from '@pqina/pintura';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    constructor(private domSanitizer: DomSanitizer) {}

    editorResult?: string = undefined;

    editorDefaults: any = getEditorDefaults({
        imageReader: {
            preprocessImageFile: async (file, options, onprogress) => {
                // If is not of type HEIC we skip the file
                if (!/heic/.test(file.type)) return file;

                // Let's turn the HEIC image into JPEG so the browser can read it
                const blob = await heic2any({
                    blob: file,
                    toType: 'image/jpeg',
                    quality: 0.94,
                });

                // The editor expects a File so let's convert our Blob
                return blobToFile(blob, file.name);
            },
        },
    });

    handleEditorProcess(imageState: any): void {
        this.editorResult = <string>(
            this.domSanitizer.bypassSecurityTrustResourceUrl(
                URL.createObjectURL(imageState.dest)
            )
        );
    }
}

<img *ngIf="editorResult" [src]="editorResult" alt="" />

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

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

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

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

<script>
    useEditorWithJQuery(jQuery, pintura);

    $(function () {
        var { processImage, blobToFile } = $.fn.pintura;

        var editor = $('#editor').pinturaDefault({
            src: 'image.jpeg',
            imageReader: {
                preprocessImageFile: async (file, options, onprogress) => {
                    // If is not of type HEIC we skip the file
                    if (!/heic/.test(file.type)) return file;

                    // Let's turn the HEIC image into JPEG so the browser can read it
                    const blob = await heic2any({
                        blob: file,
                        toType: 'image/jpeg',
                        quality: 0.94,
                    });

                    // The editor expects a File so let's convert our Blob
                    return blobToFile(blob, file.name);
                },
            },
        });

        editor.on('pintura:process', function (event) {
            const imageState = event.detail;
            $('img').attr('src', URL.createObjectURL(imageState.dest));
        });
    });
</script>

FilePond

If you want to load HEIC with FilePond you have to set the imageEditorSupportImageFormat property.

FilePond.create(document.querySelector('input'), {
    // tell FilePond to support all images that have types starting with `image`
    imageEditorSupportImageFormat: (file) => {
        return (file) => /^image/.test(file.type);
    },

    // the image editor config
    imageEditor: {
        createEditor: openDefaultEditor,
        imageReader: [
            createDefaultImageReader,
            {
                // Converting the HEIC file to a JPEG
                preprocessImageFile: async (file, options, onprogress) => {
                    // If is HEIC, we preprocess to a readable image format
                    if (/heic/.test(file.type)) {
                        // let's turn HEIC into JPEG so the browser can read it
                        const blob = await heic2any({
                            blob: file,
                            toType: 'image/jpeg',
                            quality: 0.94,
                        });

                        // Pintura Image Editor expects a File
                        return blobToFile(blob, file.name);
                    }

                    // no need to preproces
                    return file;
                },
            },
        ],

        imageWriter: [createDefaultImageWriter],
        imageProcessor: processDefaultImage,

        editorOptions: {},
    },
});