Invert Image Colors to Create a Negative Invert image colors to create a photographic negative effect.

The tool works by first loading the user-uploaded image into a hidden canvas element using the `HTMLCanvasElement` and its 2D drawing context, obtained through `getContext('2d')`. It then uses the `URL.createObjectURL()` method to create a URL for the uploaded file, which is used as the source for an `Image` object. Once the image is loaded, it retrieves the pixel data of the input image using `getImageData()`, which returns an `ImageData` object containing the color values of each pixel in RGBA format. The tool then iterates over this data, inverting each RGB channel value by subtracting its value from 255 and leaving the alpha channel unchanged.

This process is performed within a `useCallback` hook called `processImage`, which is triggered when the user clicks the "Invert Colors" button. The inverted pixel data is then put back onto the canvas using `putImageData()`, resulting in an image with inverted colors. The tool uses React's `useState` and `useRef` hooks to manage state changes and keep track of references to the canvas element and other variables, such as the input image URL and the result of the color inversion process. When the user clicks the "Download" button, it creates a new link element with the inverted image data as its source and simulates a click event on it, allowing the user to download the resulting PNG file.

The tool also uses React's `useEffect` hook to clean up any object URLs created for uploaded files when they are no longer needed, helping prevent memory leaks. This cleanup is performed by calling `URL.revokeObjectURL()` with the URL of the uploaded file as its argument. The result of the color inversion process is stored in the component's state using `setResult` and can be accessed later to display a preview of the inverted image or to download it as a PNG file.