Convert HEIC/HEIF images to JPEG, PNG in browser using Javascript.

Inspired by heic2any and libheif-web. The purpose of heic-to is to continuously follow up on releases of libheif to be able to preview HEIC/HEIF images in browser.

Currently, heic-to is using libheif 1.20.2 under the hood.

Try the 🌟 live demo.

import { isHeic } from "heic-to"

const file = field.files[0]
await isHeic(file)

import { heicTo } from "heic-to"

const file = field.files[0]

const jpeg = await heicTo({
  blob: file,
  type: "image/jpeg",
  quality: 0.5
})

const png = await heicTo({
  blob: file,
  type: "image/png",
  quality: 0.5
})

const bitmap = await heicTo({
  blob: file,
  type: "bitmap",
  options: {
    imageOrientation: "flipY"
  }
})

When meets CSP issue like this:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive

Fix it by using csp/heic-to

- import { heicTo } from "heic-to"
+ import { heicTo } from "heic-to/csp"

If you would like to access heic-to with pure JavaScript without package builder like with CDN.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iife/heic-to.js"></script>
<script>
  /*...*/
  if (await HeicTo.isHeic(file)) {
    const jpeg = await HeicTo({
      blob: file,
      type: "image/jpeg",
      quality: 0.5
    })
    /*...*/
  }
  /*...*/
</script>

If you want to call heicTo in web workers:

- import { heicTo } from "heic-to"
+ import { heicTo } from "heic-to/next"

yarn s

This will open http://127.0.0.1:8080/example/ for easy testing.

brew install cmake make pkg-config x265 libde265 libjpeg libtool
brew install emscripten

git clone [email protected]:strukturag/libheif.git

Did below changes from build-emscripten.sh

# EXPORTED_FUNCTIONS=$($EMSDK/upstream/bin/llvm-nm $LIBHEIFA --format=just-symbols | grep "^heif_\|^de265_\|^aom_" | grep "[^:]$" | sed 's/^/_/' | paste -sd "," -)
EXPORTED_FUNCTIONS=$(/opt/homebrew/opt/llvm/bin/llvm-nm $LIBHEIFA --format=just-symbols | grep "^heif_\|^de265_\|^aom_" | grep "[^:]$" | sed 's/^/_/' | paste -sd "," -)

Start building

cd libheif
mkdir buildjs
cd buildjs
USE_WASM=0 ../build-emscripten.sh ..

# Or build without unsafe-eval
USE_UNSAFE_EVAL=0 USE_WASM=0 ../build-emscripten.sh ..