HEIC 格式的圖片怎麼辦？使用 heic2any.js 轉換為 JPEG 或 PNG

本篇要解決的問題

什麼是 HEIC？

HEIC 是 High Efficiency Image Format 的縮寫，是一種現代的圖像格式，由國際標準組織 MPEG（Moving Picture Experts Group）所定義。HEIC 格式通常使用在 iOS 11 及以上版本的 iPhone、iPad 和 macOS High Sierra 及以上版本的 Mac 上，作為照片和圖像的預設格式。

HEIC 格式相比傳統的 JPEG 格式具有更好的壓縮效率，可以在保持同樣圖像質量的情況下，大幅減小檔案大小。此外，HEIC 格式還支援更多的高級功能，例如多幅圖像的合成、深度圖和 Live Photo 等。

不過，HEIC 格式目前在一些應用上還存在一些限制，例如在某些瀏覽器和操作系統上無法直接顯示，需要進行轉換才能使用。因此，對於需要與多種平台和應用進行兼容性的使用者，可能需要將 HEIC 格式的圖片轉換為其他常見的圖像格式，例如 JPEG 或 PNG。

HEIC 格式的圖片在 Windows 和 Android 系統上也需要進行轉換才能直接顯示。

使用 heic2any.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.3/heic2any.min.js"></script>

$ npm install heic2any
或
$ yarn add heic2any

import heic2any from 'heic2any';

// 讀取圖片檔案
const file = document.querySelector('input[type=file]').files[0];
// 轉換圖片格式為 JPEG
heic2any.convert({
  blob: file,
  toType: 'image/jpeg',
  quality: 0.9
}).then(function(blob) {
  // 使用轉換後的 Blob 物件
  const imgSrc = URL.createObjectURL(blob);
}).catch(function (error) {
  // 轉換失敗時的處理
});

狀況 1：使用者從 iPhone 上傳圖

<input class="hidden" id="file" type="file" accept="image/heic"/>

const fileInput = document.getElementById('file');
fileInput.addEventListener('change', async (e) => {
  const type = document.getElementById('type').value;
  const file = e.target.files[0];
  const result = await heic2any({
    blob: file,
    toType: toType: 'image/jpeg',
    quality: 1
  });
  const uri = URL.createObjectURL(result);
  
  // 執行下載
  const filename = file.name.split('.heic')[0];
  const link = document.createElement('a');
  link.download = `檔名.${type}`;
  link.href = uri;
  link.click();
  
  // 清空 file input 的值
  fileInput.value = '';
});

狀況 2：API 回應的圖檔，是 HEIC 的 Base64 格式

// imgBase64 就是 HEIC 的 Base64 值，因為太長，就只顯示開頭的部份
const imgBase64 = "data:image/heic;base64,AAAAGGZ0eXBoZ......";
// 用 fetch 將 Base64 轉成 blob
const base64ToBlob = await fetch(imgBase64).then(res => res.blob());
const defaultImg = await heic2any({
  blob: base64ToBlob,
  toType: 'image/jpeg',
  quality: 1
});
// 執行下載
const src = URL.createObjectURL(defaultImg);
const link = document.createElement('a');
link.download = `檔名.${type}`;
link.href = src;
link.click();

const imgBase64 = "data:image/heic;base64,AAAAGGZ0eXBoZ......";
// 用 atob 將 Base64 轉為 blob
const base64ToBlob = (base64) => {
  const binary = atob(base64.split(',')[1]);
  const mime = base64.split(',')[0].match(/:(.*?);/)[1];
  const len = binary.length;
  const buffer = new ArrayBuffer(len);
  const view = new Uint8Array(buffer);
  for (let i = 0; i < len; i++) {
    view[i] = binary.charCodeAt(i);
  }
  return new Blob([buffer], { type: mime });
};
const defaultImg = await heic2any({
  blob: base64ToBlob(imgBase64),
  toType: 'image/jpeg',
  quality: 1
});

本篇 Demo 及原始碼