フロントエンドでHEIC画像をjpegやpngに変換したい

iPhoneで撮影した画像はHEIC形式になっていますが、HEICだとブラウザで表示することができません。そのため、アップロードされたHEIC画像をブラウザで表示する場合は、jpegやpngに変換する必要があります。
もしフロントエンドで変換をするのであれば、heic2anyというライブラリをおすすめします。

heic2anyは、HEIC形式の画像ファイルをJPEG、PNG、GIFなどの画像形式に変換するためのJavaScriptライブラリです。

実装例

HEIC画像をjpeg画像に変換するコード例はこちらです。

import fs from 'fs/promises';
import heic2any from 'heic2any';

// HEICファイルを読み込み、JPEGに変換し、結果をファイルに保存する関数
async function convertHeicToJpeg(inputPath, outputPath) {
    try {
        // HEICファイルを読み込む
        const heicBuffer = await fs.readFile(inputPath);

        // HEICからJPEGに変換
        const jpegBuffer = await heic2any({
            buffer: heicBuffer,
            toType: 'image/jpeg',
        });

        // JPEGバッファをファイルに書き込む
        await fs.writeFile(outputPath, Buffer.from(jpegBuffer));
        console.log(`Converted ${inputPath} to ${outputPath}`);
    } catch (error) {
        console.error('Error converting HEIC to JPEG:', error);
    }
}

// 実行例
const inputPath = heicImage; // ブラウザにアップロードしたファイルデータを指定
const outputPath = 'output.jpg';

convertHeicToJpeg(inputPath, outputPath);

png形式へ変換する場合は、toTypeにimage/pngを指定してください。
heic2any関数にqualityやmultipeなどのオプションを指定することも可能なため、詳しくは公式ドキュメントを参照ください。

公式ドキュメント
https://alexcorvi.github.io/heic2any/