npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

libheif-js

v1.18.2

Published

Emscripten distribution of libheif for Node.JS and the browser

Downloads

317,840

Readme

libheif-js

An Emscripten build of libheif distributed as an npm module for Node.JS and the browser.

github actions test jsdelivr npm-downloads npm-version

This module will respect the major and minor versions of the included libheif, with the patch version representing changes in this module itself. For the exact version of libheif, please see the install script.

Install

npm install libheif-js

Usage

Starting with version 1.17, there are multiple variants of libheif that you can use:

  • The default is still the classic pure-javascript implementation (for backwards compatibility, of course). You can still bundle this into your project with your bundler of choice.
    const libheif = require('libheif-js');
  • There is a wasm version available for use in NodeJS. This version will dymanically load the .wasm binary at runtime. While you may try to run this through a bundler, you are on your own for making it work.
    const libheif = require('libheif-js/wasm');
  • There is also a wasm version that is pre-bundled for you, which includes the .wasm binary inside the .js bundle. You will have a much easier time using this in your browser bundle project.
    const libheif = require('libheif-js/wasm-bundle');

If you'd like to include this module directly into an html page using a <script> tag, you have the following options:

Note: in the examples below, make sure to set the latest version when you use it. Always make sure to set a version, to make sure your website does not break unexpectedly when an update is released.

  • Use the pure-javascript implementation, exposing a libheif global:
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/libheif/libheif.js"></script>
  • Use the wasm bundle, exposing a libheif global:
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/libheif-wasm/libheif-bundle.js"></script>
  • Use the ES Module version, which now works in all major browsers and you should try it:
    <script type="module">
      import libheif from 'https://cdn.jsdelivr.net/npm/[email protected]/libheif-wasm/libheif-bundle.mjs';
    </script>

In all cases, you can use this sample code to decode an image:

const file = fs.readFileSync('./temp/0002.heic');

const decoder = new libheif.HeifDecoder();
const data = decoder.decode(file);
// data in an array holding all images inside the heic file

const image = data[0];
const width = image.get_width();
const height = image.get_height();

In NodeJS, you might use this decoded data with other libraries, such as pngjs:

const { PNG } = require('pngjs');

const imageData = await new Promise((resolve, reject) => {
  image.display({ data: new Uint8ClampedArray(width*height*4), width, height }, (displayData) => {
    if (!displayData) {
      return reject(new Error('HEIF processing error'));
    }

    resolve(displayData);
  });
});

const png = new PNG({ width: imageData.width, height: imageData.height });
png.data = imageData.data;

const pngBuffer = PNG.sync.write(png);

In the browser, you might use this decoded data with canvas to display or convert the image:

const canvas = document.createElement('canvas');

canvas.width = width;
canvas.height = height;

const context = canvas.getContext('2d');
const imageData = context.createImageData(width, height);

await new Promise((resolve, reject) => {
  image.display(imageData, (displayData) => {
    if (!displayData) {
      return reject(new Error('HEIF processing error'));
    }

    resolve();
  });
});

context.putImageData(imageData, 0, 0);

Related

This module contains the low-level libheif implementation. For more user-friendly functionality, check out these projects:

  • heic-cli - convert heic/heif images to jpeg or png from the command line
  • heic-convert - convert heic/heif images to jpeg and png
  • heic-decode - decode heic images to raw image data