Replace Colors in Images Online Replace a specific color with another using tolerance matching.

The tool works by utilizing the HTML5 Canvas API to process and manipulate images. When an image is dropped into the FileDropzone component, it creates a URL object using `URL.createObjectURL` and sets it as the source for an Image object. Once the image is loaded, it draws the image onto a canvas element using `ctx.drawImage`. The tool then retrieves the image data from the canvas using `ctx.getImageData`, which returns a Uint8ClampedArray representing the pixel data.

The color replacement algorithm iterates over each pixel in the image data array, calculating the Euclidean distance between the current pixel's RGB values and the source color's RGB values. If the calculated distance is within the specified tolerance range, it replaces the pixel's RGB values with the target color's RGB values while preserving the luminance offset. This is achieved by adjusting the target color's RGB values based on the difference in luminance between the original pixel and the source color.

The tool uses React Hooks such as `useState`, `useRef`, and `useCallback` to manage state, references, and function memoization. The `canvasRef` reference is used to access the canvas element and its context, while `image` and `result` states store the input image URL and processed image data URL respectively. When the user clicks the Apply button, it triggers the `processImage` function which executes the color replacement algorithm on the input image.

The tolerance range is mapped from a scale of 0-100 to a distance range of 0-441 using the formula `maxDist = tolerance * 4.41`. This allows users to control how similar pixels must be to match the source color, enabling flexible color replacement options. The processed image can then be downloaded as a PNG file using the `canvas.toDataURL` method and the `download` function.

The React components such as FileDropzone and glass-card are used for handling user input and displaying the interface. The tool also utilizes browser APIs like URL.revokeObjectURL to clean up object URLs when they are no longer needed, preventing memory leaks. By combining these technologies and algorithms, it enables efficient color replacement in images while preserving natural shading and luminance variations.