Published on

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

Authors

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

https://github.com/alexcorvi/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/