v8.82.6

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.

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

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: {},
    },
});