Floyd-Steinberg Image Dithering Online Apply Floyd-Steinberg dithering for retro limited-color effects.

The tool works by utilizing the Floyd-Steinberg error diffusion dithering algorithm to simulate smooth gradients with limited colors. This process involves iterating over each pixel in the uploaded image, which is first loaded into a canvas element using the HTMLCanvasElement and CanvasRenderingContext2D APIs from the browser. The image data is then retrieved as a Uint8ClampedArray using the getImageData method, allowing for direct manipulation of pixel values. The algorithm calculates the quantization error for each pixel by rounding its color value to the nearest level, and then distributes this error to neighboring pixels according to predefined coefficients: 7/16 to the right, 3/16 to the bottom-left, 5/16 to the bottom, and 1/16 to the bottom-right. This process is repeated for each pixel in the image, effectively creating a dithered effect.

The use of React hooks such as useState, useRef, and useCallback enables efficient management of state and side effects within the tool. The canvasRef is used to store a reference to the canvas element, while the image state stores the uploaded image file as a URL object created using URL.createObjectURL. When the user adjusts the color levels or applies the dither effect, the processImage function is called, which re-renders the image on the canvas with the updated settings and generates a new PNG image data URL using the toDataURL method. This resulting image can then be downloaded by the user as a file named "dithered.png". The tool also utilizes TypeScript for type checking and ensures proper memory management by revoking object URLs when they are no longer needed, preventing potential memory leaks.