Fast way to convert between "packed" and "unpacked" image data pixels.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



BitPacker.js is a very fast and efficient way of converting pixels from something like ImageData() (4 0-255 Uint8Clamped values) into a single 32-bit integer (and vice versa).


npm install bitpacker


const bitPacker = new BitPacker() // Create a new bitpacker object

// Get a pixel value from an image, this would be a "medium gray"
const red = 150
const green = 150
const blue = 150
const alpha = 255 // Fully opaque

// Now convert it to a single packed integer
const packedPixel = bitPacker.packPixel(red, green, blue, alpha) // equals `-6908266`, it's negative when viewed in "normal" JS but inside a uint32Array it will be correct

// And we can do the opposite as well:
const packedPixel2 = -328966 // This is an almost entirely black pixel, it's negative when viewed in "normal" JS but inside a uint32Array it will be correct

const unpackedPixelArray = bitPacker.unpackPixel(packedPixel2) // equals `[250, 250, 250, 255]`

This is mainly used so that you can "view" the data from ImageData() as a Uint32Array instead of a Uint8ClampedArray of RGBA values. This means you can loop over the whole image 4x faster, and will only need to unpack and manipulate the pixels you need, and quickly repack them.

In one application this ended up with close to a 3x speedup when processing image data.


The MIT License (MIT)

See LICENSE.txt for details