Loading and editing HEIC/HEIF images

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

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

import heic2any from './heic2any.js';
import {
    openDefaultEditor,
    createDefaultImageReader,
    blobToFile,
} from './doka.js';

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-image.jpeg',
    imageReader: createDefaultImageReader({
        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);
        },
    }),
});

// Show resulting image preview
editor.on('process', ({ dest }) => {
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);
});