react

@ditherkit/react

This package provides a React component, <DitheredImage />, for applying high-performance dithering and image effects in the browser.

Features

• High-Performance: All image processing is done in a separate thread using a Web Worker to keep the UI responsive.
• Multiple Algorithms: Supports various dithering algorithms like Floyd-Steinberg, Atkinson, and Threshold.
• Customizable Palettes: Control the exact color palette used for the final image.
• Brightness & Contrast: Adjust brightness and contrast with sliders.
• Cross-Browser Compatibility: Includes a special workaround for Safari to ensure brightness and contrast controls work correctly.

Installation

pnpm add @ditherkit/react

Usage

import { DitheredImage } from "@ditherkit/react";

function MyComponent() {
  return (
    <DitheredImage
      src="/path/to/your/image.jpg"
      alt="An example image"
      algorithm="Atkinson"
      brightness={-10}
      contrast={20}
      palette="#000000,#ff0000,#00ff00,#0000ff,#ffffff"
    />
  );
}

Safari Compatibility

This component automatically detects Safari and uses a manual, pixel-based method for applying brightness and contrast to work around limitations in Safari's Web Worker implementation. For other browsers, it uses the standard, hardware-accelerated CanvasRenderingContext2D.filter property.