v8.69.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.

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