A 🔥Performance🔥 library of functions for interacting with pixel data and ImageData objects. This package is designed to be a tree-shake friendly list of functions.
$ npm i pixel-data-js
Uint32ArrayThe ImageData.data object is a Uint8ClampedArray.
It is easy to use but, it is inefficient for heavy processing because every single pixel requires four separate write operations (Red, Green, Blue, and Alpha).
By using a Uint32Array view, we can treat all four color channels as a single 32-bit integer, allowing us to update an entire pixel in a single CPU operation.
A single pixel consists of four 8-bit channels (R, G, B, A). The entire color's data can fit into a single 32-bit unsigned integer 8 * 4 = 32 (Color32).
import { packColor } from 'pixel-data-js'
const ctx = canvas.getContext('2d')
const imageData = ctx.getImageData(0, 0, width, height)
// 1. Get the underlying buffer
const buffer = imageData.data.buffer
// 2. Create a 32-bit view of that same buffer
const data32 = new Uint32Array(buffer)
// 3. Write a single pixel (Red: 255, Green: 100, Blue: 0, Alpha: 255)
// This is 4x faster than writing to imageData.data[i...i+3]
data32[0] = packColor(255, 100, 0, 255)
// 4. Push back to canvas
ctx.putImageData(imageData, 0, 0)
You can define colors using the AABBGGRR (Little-Endian) to make a Color32 object.
$ pnpm install
$ pnpm run build
$ pnpm run test
$ pnpm run test:mutation
package.json file version (example: 1.0.99)package.json version prefixed with v (example: v1.0.99)