heic2any

What is heic2any?

The heic2any npm package is a JavaScript library that allows you to convert HEIC (High Efficiency Image Coding) images to other formats such as JPEG, PNG, and GIF. It is particularly useful for web applications that need to handle HEIC images, which are commonly used by Apple devices.

What are heic2any's main functionalities?

Convert HEIC to JPEG

This code sample demonstrates how to convert a HEIC file to a JPEG file using the heic2any package. It listens for a file input change event, converts the selected HEIC file to JPEG, and then displays the converted image on the webpage.

const heic2any = require('heic2any');

const inputFile = document.getElementById('inputFile');
inputFile.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const convertedBlob = await heic2any({ blob: file, toType: 'image/jpeg' });
  const img = document.createElement('img');
  img.src = URL.createObjectURL(convertedBlob);
  document.body.appendChild(img);
});

Convert HEIC to PNG

This code sample demonstrates how to convert a HEIC file to a PNG file using the heic2any package. It listens for a file input change event, converts the selected HEIC file to PNG, and then displays the converted image on the webpage.

const heic2any = require('heic2any');

const inputFile = document.getElementById('inputFile');
inputFile.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const convertedBlob = await heic2any({ blob: file, toType: 'image/png' });
  const img = document.createElement('img');
  img.src = URL.createObjectURL(convertedBlob);
  document.body.appendChild(img);
});

Convert HEIC to GIF

This code sample demonstrates how to convert a HEIC file to a GIF file using the heic2any package. It listens for a file input change event, converts the selected HEIC file to GIF, and then displays the converted image on the webpage.

const heic2any = require('heic2any');

const inputFile = document.getElementById('inputFile');
inputFile.addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const convertedBlob = await heic2any({ blob: file, toType: 'image/gif' });
  const img = document.createElement('img');
  img.src = URL.createObjectURL(convertedBlob);
  document.body.appendChild(img);
});

Other packages similar to heic2any

sharp

Sharp is a high-performance image processing library for Node.js. It supports a wide range of image formats, including HEIC, and provides functionalities for resizing, cropping, and converting images. Compared to heic2any, Sharp offers more advanced image processing capabilities but may be more complex to use for simple HEIC to JPEG/PNG/GIF conversions.

imagemin

Imagemin is an image optimization library for Node.js that supports various image formats, including HEIC. It focuses on minimizing image file sizes while maintaining quality. While it can convert HEIC images, its primary use case is image optimization rather than format conversion, making it different from heic2any.

jimp

Jimp is a JavaScript image processing library that supports various image formats, including HEIC. It provides functionalities for image manipulation, such as resizing, cropping, and converting images. Jimp is similar to heic2any in terms of format conversion but offers additional image manipulation features.

README

HEIC2ANY

Demo, Documentation & more

Client-side (browser-side, using Javascript) conversion of HEIC/HEIF image files to JPEG, PNG, or GIF.

What is HEIC format?

High Efficiency Image File Format (HEIC) is a new image container format from the developers of MPEG, a popular audio and video compression standard. HEIC will be used by default on new photos on iOS 11, and it’s designed to save you storage space. As it’s a new container format, there will be some incompatibilities along the way, and Apple does a good job at handling most of these. iOS 11 will automatically share HEIC files as the default JPEG format for apps, so you won’t notice anything when you share a photo on Twitter or Instagram. iOS 11 also offers to automatically transfer photos and videos in a compatible format for Mac or PC users, useful if you’re simply plugging your iPhone into your laptop or PC. theverge.com

Why you might need it?

While developing some web-based application that should be able to handle mobile uploads, I've come across a problem where browsers can not display certain images uploaded from the iPhone, after investigating through the issue, I noticed that that my iPhone was giving a heic formatted image.

Currently there are zero web browsers that support HEIC photos. Even Apple's latest-greatest version of Safari can't decode HEIC and doesn't recognize the "image/heic" mimetype. A solution that came across my mind is to utilize the benefits of high resolution and low storage of heic images when storing in the server and client-side conversion to JPEG for viewing on the browser.

Usage and limitations

This library would typically be used for viewing purposes, as currently it's not focusing on copying any metadata from the original heic file to the output jpeg, gif or png. The development process of this library is focusing on viewing a browser-consumable version of an heic file, and doing it quickly, asynchronously (using web workers) and accurately. This library would even convert heic containers that have multiple heic images into an animated gif.

However, if you're planning on storing the files (not just viewing them), I'd suggest you look for a server-side tool, or you try to get your hands dirty and contribute to this library and make it capable of storing metadata.

Last but not least, this tool is specifically for the browser environment, it will not work in node environment.

Known issues

Those are the known issues of the library, pull requests are welcome:

1. Library doesn't take any metadata from the original file, resulting file doesn't have any metadata.
2. Library can convert bursts into an animated gif, however when a heic animation is given (like the stars animation in the demo) library will only take the first shot of the animation.
3. Support for IE11 is not here yet.
4. The library requires a browser-like environment to work, i.e. it needs the existence of the DOM and window object.