Pixyelator is a tiny pixelation tool built for the browser.

More specifically, it was built for nearsight.cc. See another demo here.

Pixyelator gets its very creative name because you control exactly how many x and y pixels there are.

Usage Example

npm install pixyelator

import { Pixyelator } from "pixyelator";
// Create a new Pixyelator instance from an image
// This will draw results to targetCanvas
const pixyelator = await Pixyelator.fromImage(
  "https://cdn.britannica.com/83/28383-050-33D8DB80/Beaver.jpg",
  {
    targetCanvas: document.getElementById("targetCanvas"),
  }
);
const pixelatedImageDataURL = await pixyelator.pixelate(4, 4).toDataURL();
// Dispose of the instance when you're done
pixyelator.dispose();

Methods

What kind of method is this?: Pixyelator.fromImage(source, options?)

This is a factory method for creating a new Pixyelator instance from an image source. Accepts a URL, data URL, Blob, ArrayBuffer, or HTMLImageElement. Returns a Promise<Pixyelator>.

What kind of method is this?: pixelate(xPixels, yPixels, options?)

This is the pixelation method. It pixelates the image into the specified number of horizontal and vertical blocks. Returns a chainable promise. You can call .toBlob(), .toCanvas(), .toDataURL(), or .toArrayBuffer() directly on the result. Pass { grayscale: true } in options to convert to grayscale.

What kind of method is this?: toCanvas()

This is an output method. It returns the HTMLCanvasElement containing the pixelated image.

What kind of method is this?: toBlob()

This is an output method. It converts the pixelated image to a Blob. Returns a Promise<Blob>.

What kind of method is this?: toDataURL()

This is an output method. It converts the pixelated image to a data URL string.

What kind of method is this?: toArrayBuffer()

This is an output method. It converts the pixelated image to an ArrayBuffer. Returns a Promise<ArrayBuffer>.

What kind of method is this?: dispose()

This is a cleanup method. It cleans up resources and disposes of the instance. Call this when you're done to free memory.

Options

What kind of option is this?: targetCanvas

This is a fromImage option. It sets the canvas to render results to. Defaults to a new canvas.

What kind of option is this?: grayscale

This is a pixelate option. It converts the image to grayscale when set to true. Defaults to false.