@invertcolor/invertcolor

Minimal browser-first utilities for inverting RGBA pixel data, designed for the tooling behind https://invertcolor.app.

Installation

npm install @invertcolor/invertcolor

Usage

Provide your own image loading and canvas setup, then pass the resulting ImageData (or raw Uint8ClampedArray) to the helpers.

import { invertImageData, invertPixels } from '@invertcolor/invertcolor';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.drawImage(myImageElement, 0, 0);
const data = ctx.getImageData(0, 0, canvas.width, canvas.height);

const inverted = invertImageData(data); // returns new ImageData
ctx.putImageData(inverted, 0, 0);

// Or work with pixel buffers directly
const invertedBuffer = invertPixels(data.data);

Options

Both invertImageData and invertPixels accept an optional { mutate?: boolean } flag.

• mutate: true will modify the provided buffer/ImageData in place.
• The default (false) returns a cloned buffer/ImageData, leaving the original untouched.

API

invertPixels(pixels, options?)

• pixels: Uint8ClampedArray representing RGBA data.
• options.mutate: when true, inversion happens on the provided array.

Returns: Uint8ClampedArray containing the inverted pixel values.

invertImageData(imageData, options?)

• imageData: ImageData retrieved by the caller (e.g. via CanvasRenderingContext2D#getImageData).
• options.mutate: when true, the provided ImageData is mutated.

Returns: ImageData with inverted colors.

License

MIT © invertcolor.app