Visualize RGB and Luminance Distribution Across Your Image Visualize the color distribution of an image with RGB and luminance histograms.

Under the hood, it uses React Hooks like useState and useRef to manage state and references to HTMLCanvasElement instances. The analyze function utilizes the Canvas API's getImageData method to extract pixel data from the uploaded image, which is then processed into 256-bin arrays for each color channel (Red, Green, Blue) and luminance. This processing involves iterating over the pixel data in increments of 4 bytes (representing the RGBA values), tallying the occurrences of each intensity value (0-255) in the respective arrays.

The luminance calculation is performed using the standard formula: 0.299 * Red + 0.587 * Green + 0.114 * Blue, where the coefficients represent the relative sensitivity of human vision to different wavelengths of light. These calculations are done on a per-pixel basis, resulting in an array of 256 luminance values that represent the distribution of brightness in the image. When rendering the histograms, it uses individual Canvas elements for each color channel and luminance, with the fillRect method drawing colored bars scaled to the maximum bin count.

To handle file uploads, it employs a FileDropzone component from the React library, which accepts files with an "image/*" MIME type and triggers the handleFile callback when a file is dropped or selected. This callback creates a URL object for the uploaded image using URL.createObjectURL, which is then passed to the analyze function for processing. The resulting histograms are displayed alongside the original image, allowing users to visualize and compare the color distribution of their images.

The histograms themselves are rendered as a series of colored bars, where the x-axis represents intensity values ranging from 0 (black) to 255 (white), and the y-axis represents the count of pixels at each intensity level. The height of each bar is scaled relative to the maximum bin count, providing a visual representation of the distribution of pixel values in the image. By examining these histograms, users can identify imbalances in their image's color distribution, such as overexposure or underexposure, and make informed decisions about adjustments to exposure, contrast, and color balance.

The tool also employs React's useEffect Hook to manage the lifecycle of the uploaded image and its associated URL object, ensuring that resources are properly cleaned up when the component is unmounted or the user navigates away. Specifically, it uses the URL.revokeObjectURL method to release any system resources associated with the uploaded image, helping to prevent memory leaks and maintain application performance.