Adjust Image Contrast Online Adjust image contrast to enhance or reduce the difference between light and dark areas.

Under the hood, it utilizes the HTML5 Canvas API to manipulate image data, specifically the `getContext` method to access the 2D drawing context of a canvas element. The `getImageData` method retrieves the pixel data of the original image, which is then modified using the contrast formula to adjust the RGB values. This formula calculates a scaling factor based on the user-inputted contrast value, ranging from -100 to 100, and applies it to each pixel's color channels. The resulting adjusted pixel values are then put back into the canvas using `putImageData`, effectively creating a new image with the modified contrast levels.

The tool relies on React hooks such as `useState` and `useCallback` to manage state changes and optimize performance by memoizing functions like `handleFile` and `processImage`. When an image file is dropped or selected, it creates a URL object using `URL.createObjectURL`, which is then used as the source for an `img` element. Once the image is loaded, its dimensions are used to set the canvas size, ensuring accurate rendering of the adjusted image.

The contrast adjustment algorithm itself employs basic arithmetic operations and bit-level manipulations to calculate the new pixel values, adhering to standard color representation formats like PNG. Notably, it preserves alpha channel transparency during processing by only modifying RGB components. As users interact with the range input or predefined buttons, the `processImage` function is called, recalculating and reapplying the contrast adjustment in real-time.

File handling relies on browser APIs such as `URL.revokeObjectURL`, which ensures that object URLs created for dropped files are properly released when no longer needed. Download functionality uses a dynamically created anchor element with its `href` attribute set to the adjusted image's data URL, obtained via `canvas.toDataURL('image/png')`. This approach enables users to download their contrast-adjusted images in PNG format without requiring server-side processing or additional libraries beyond React and native browser APIs like HTML5 Canvas.