foo-dither-wasm

Floyd–Steinberg dithering compiled from Rust to WebAssembly. This package exposes the same API as the Rust crate so you can run the dithering pass directly in a browser or any bundler that understands .wasm imports.

Build

npm install
npm run build

The build step runs wasm-pack build --target bundler against the Rust crate located one directory up from this package. The compiled JavaScript, TypeScript declaration file, and .wasm binary are emitted into pkg/.

If you also want an artefact optimised for direct <script type="module"> usage, run:

npm run build:web

That produces a browser-friendly bundle under ../web/pkg, which is used by the demo page in ../web/index.html.

Usage

import init, {
  dither_rgba_default,
  dither_rgba_with_options,
} from "foo-dither-wasm";

// Ensure WASM is loaded before calling the exported helpers.
await init();

const width = imageData.width;
const height = imageData.height;
const rgbaBytes = imageData.data;

// Run with defaults
const grayscaleBytes = dither_rgba_default(rgbaBytes, width, height);

// Or customise the dithering pipeline
const tunedGrayscaleBytes = dither_rgba_with_options(
  rgbaBytes,
  width,
  height,
  /* gamma */ 1.8,
  /* threshold */ 0.6,
  /* diffusionStrength */ 0.75,
  /* shadowLift */ 0.35,
  /* serpentine */ true,
);

dither_rgba_default returns a single byte per pixel buffer containing the 0/255 grayscale image. Expand it to RGBA, draw it back onto a canvas, or upload it to a WebGL/WebGPU texture — whatever suits your pipeline.

Publishing

1. npm run clean && npm run build
2. Update the version in this package.json (and optionally keep it in sync with the Rust crate’s version).
3. npm publish

If you are publishing under a scoped package name, change the "name" field in package.json accordingly before publishing.