Seamlessly Convert HEIC to PNG/JPG/GIF in Your Browser

HEIC (High-Efficiency Image Coding) files are commonly used by Apple devices for storing photos. However, these files are not always easily accessible or shareable due to compatibility issues. Converting HEIC images to a more universally accepted format like PNG or JPG can be highly beneficial. In this article, we will learn how to convert HEIC files to PNG or JPG directly in the browser environment using JavaScript.

Why Convert HEIC to PNG/JPG?

• Compatibility: PNG and JPG are widely supported formats across different devices and operating systems.

• Ease of Sharing: PNG and JPG files can be easily shared and viewed without worrying about compatibility issues.

• High Quality: Both PNG and JPG formats offer high-quality image rendering suitable for various purposes.

• Privacy: With the advent of AI, your data is not safe on any server. Everyone is using your data to train AI models. That's why Copilot is leaking AWS keys. So, be aware of uploading any data to any server. If your data is sent to a server, it's not safe.

Overview of the Code

Our solution involves three main steps:

1. Load the HEIC File

2. Convert HEIC to an Image Format (PNG or JPG)

3. Download the Converted Images

Step 1: Load the HEIC File

We start by creating a file input element in HTML to allow users to select HEIC files from their device. This input element is designed to accept multiple files at once and restricts the file types to those with a .heic extension.

<input type="file" id="fileInput" accept=".heic" multiple />

Step 2: Convert HEIC to an Image Format (PNG or JPG or GIF)

To convert HEIC files to PNG or JPG, we utilize the heic2any library. This library can handle the conversion of HEIC files to various formats, including PNG and JPG. We define an asynchronous function, convertHeicToImage, which takes a file and the desired output format as input and returns a blob of the converted image. In the following function you can give the format you have to give the mime type like 'image/jpeg' 'image/png' or 'image/gif'. This will give you a file in raw form such that it can be downloaded.

import heic2any from 'heic2any';

async function convertHeicToImage(file, format) {
  const blob = await heic2any({ blob: file, toType: format });
  return blob;
}

Step 3: Download the Converted Images

In this step, we create functions to handle the conversion and downloading of the converted images. Here's a detailed breakdown of the process:

Converting and Downloading Images

1. Define the Asynchronous Function: We start by defining an asynchronous function, convertAndDownloadImages, which takes the selected files and the desired format (PNG or JPG) as input.

2. Convert to Data URL: The function converts the file into a data URL, allowing us to download the file using built-in browser methods.

3. Download the File: We use the a tag with the download attribute to facilitate the download. By programmatically clicking the link, we can trigger the download.

4. Release File Data: After the download, we release the file data using URL.revokeObjectURL(imageUrl) to free up memory.

Here’s the code snippet for better clarity:

async function convertAndDownloadImages(files, format) {
  for (let file of files) {
    const imageBlob = await convertHeicToImage(file, format);
    const imageUrl = URL.createObjectURL(imageBlob);
    const a = document.createElement('a');
    a.href = imageUrl;
    a.download = file.name.replace('.heic', `.${format}`);
    a.click();
    URL.revokeObjectURL(imageUrl);
  }
}

Adding Event Listener to File Input

We add an event listener to the file input element to call the convertAndDownloadImages function whenever files are selected. We also provide an option for the user to choose the desired output format.

<select id="formatSelect">
  <option value="image/png">PNG</option>
  <option value="image/jpeg">JPG</option>
  <option value="image/gif">GIF</option>
</select>

document.getElementById('fileInput').addEventListener('change', (event) => {
  const files = Array.from(event.target.files);
  const format = document.getElementById('formatSelect').value;
  convertAndDownloadImages(files, format);
});

Conclusion

Converting HEIC files to PNG or JPG directly in the browser is a practical solution for overcoming compatibility issues and ensuring high-quality image rendering. By following the steps outlined in this article, you can easily convert and share your HEIC images in a universally accepted format. For a seamless and efficient conversion process, you can also visit our website, onlineheicconvert.com, where I have implemented this functionality so that you can convert HEIC files with full privacy.