@jsquash/png

An easy experience for encoding and decoding PNG images in the browser. Powered by WebAssembly ⚡️.

Uses the rust PNG crate.

A jSquash package. Codecs and supporting code derived from the Squoosh app.

Installation

npm install --save @jsquash/png
# Or your favourite package manager alternative

Usage

Note: You will need to either manually include the wasm files from the codec directory or use a bundler like WebPack or Rollup to include them in your app/server.

decode(data: ArrayBuffer, options?: { bitDepth?: 8 | 16 }): Promise<ImageData | ImageDataRGBA16>

Decodes PNG binary ArrayBuffer to raw image data. By default, it decodes to 8-bit RGBA image data. If options.bitDepth is set to 16, it decodes to 16-bit RGBA image data.

data

Type: ArrayBuffer

options (optional)

Type: object

• bitDepth (optional): 8 | 16 - The desired bit depth of the output. Defaults to 8.

Example

import { decode } from '@jsquash/png';

const formEl = document.querySelector('form');
const formData = new FormData(formEl);
// Decode to 8-bit RGBA
const imageData8bit = await decode(await formData.get('image').arrayBuffer());
// Decode to 16-bit RGBA
const imageData16bit = await decode(await formData.get('image').arrayBuffer(), { bitDepth: 16 });

encode(data: ImageData | ImageDataRGBA16, options?: { bitDepth?: 8 | 16 }): Promise

ℹ️ You may want to use the @jsquash/oxipng package instead. It can both optimise and encode to PNG directly from raw image data (8-bit images only).

Encodes raw RGB image data to PNG format and resolves to an ArrayBuffer of binary data.

Can optionally specify the bit depth of the output PNG. The default is 8-bit.

data

Type: ImageData or for 16-bit images { data: Uint16Array; width: number; height: number; }

Example

import { encode } from '@jsquash/png';

async function loadImage(src) {
  const img = document.createElement('img');
  img.src = src;
  await new Promise(resolve => img.onload = resolve);
  const canvas = document.createElement('canvas');
  [canvas.width, canvas.height] = [img.width, img.height];
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return ctx.getImageData(0, 0, img.width, img.height);
}

const rawImageData = await loadImage('/example.jpg');
const pngBuffer = await encode(rawImageData);

Example with 16-bit image data

import { encode } from '@jsquash/png';

async function create16bitImage(src) {
  const pixels = new Uint16Array(4 * 256 * 256);
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = Math.floor(Math.random() * 65535); // R
    pixels[i + 1] = Math.floor(Math.random() * 65535); // G
    pixels[i + 2] = Math.floor(Math.random() * 65535); // B
    pixels[i + 3] = 65535; // A
  }
  return {
    data: pixels,
    width: 256,
    height: 256,
  };
}

const rawImageData = await create16bitImage();
const png16bitBuffer = await encode(rawImageData, { bitDepth: 16 });

Manual WASM initialisation (not recommended)

In most situations there is no need to manually initialise the provided WebAssembly modules. The generated glue code takes care of this and supports most web bundlers.

One situation where this arises is when using the modules in Cloudflare Workers (See the README for more info).

The encode and decode modules both export an init function that can be used to manually load the wasm module.

import decode, { init as initPngDecode } from '@jsquash/png/decode';

initPngDecode(WASM_MODULE); // The `WASM_MODULE` variable will need to be sourced by yourself and passed as an ArrayBuffer.
const image = await fetch('./image.png').then(res => res.arrayBuffer()).then(decode);