Converting HEIF/HEIF image formats to PNG/JPEG in the browser
npm install heic-toConvert 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.21.2 under the hood.
| Release | libheif |
| -------- | -------- |
| 1.4.2 | 1.21.2 |
| 1.4.1 | 1.21.1 |
| 1.4.0 | 1.21.0 |
| 1.3.1 | 1.20.2 |
| 1.3.0 | 1.20.2 |
| 1.2.2 | 1.20.2 |
| 1.2.1 | 1.20.1 |
| 1.2.0 | 1.20.0 |
| 1.1.14 | 1.19.8 |
| 1.1.14 | 1.19.8 |
| 1.1.13 | 1.19.8 |
| 1.1.12 | 1.19.7 |
| 1.1.11 | 1.19.7 |
| 1.1.10 | 1.19.7 |
| 1.1.9 | 1.19.7 |
| 1.1.8 | 1.19.7 |
| 1.1.7 | 1.19.6 |
| 1.1.6 | 1.19.5 |
| 1.1.5 | 1.19.5 |
| 1.1.4 | 1.19.4 |
| 1.1.3 | 1.19.3 |
| 1.1.2 | 1.19.2 |
| 1.1.1 | 1.19.1 |
| 1.1.0 | 1.19.0 |
| 1.0.3 | 1.18.2 |
| 1.0.2 | 1.18.2 |
| 1.0.1 | 1.18.2 |
| 1.0.0 | 1.18.1 |
Try the 🌟 live demo.
#### Check whether the image is HEIC or not
``js
import { isHeic } from "heic-to"
const file = field.files[0]
await isHeic(file)
`
#### Convert HEIC to JPEG/PNG/Bitmap
`js
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"
}
})
`
#### Cotent Security Policy
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
`diff`
- import { heicTo } from "heic-to"
+ import { heicTo } from "heic-to/csp"
#### Access global variable with IIFE build
If you would like to access heic-to with pure JavaScript without package builder like with CDN.
`html`
#### Call heic-to in web worker
If you want to call heicTo in web workers:
`diff`
- import { heicTo } from "heic-to"
+ import { heicTo } from "heic-to/next"
#### How to fast test your changes on local?
`bash`
yarn s
This will open http://127.0.0.1:8080/example/ for easy testing.
#### How to build libheif.js from libheif on Mac
`bash
brew install cmake make pkg-config x265 libde265 libjpeg libtool
brew install emscripten
git clone git@github.com:strukturag/libheif.git
`
Did below changes from build-emscripten.sh`diff`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
`bash
cd libheif
mkdir buildjs
cd buildjs
USE_WASM=0 ../build-emscripten.sh ..