Inspect Images at Pixel Level Zoom into images at pixel level with a grid overlay showing individual pixel colors.

Under the hood, the tool uses React's useState and useRef hooks to manage state and references to DOM elements, such as the canvas element where the image is rendered. When an image file is dropped into the FileDropzone component, it triggers the handleFile function which creates a URL object for the file using URL.createObjectURL and sets it as the src attribute of an Image object. Once the image is loaded, its natural width and height are used to set the dimensions of a source canvas element, where the image is drawn using the 2D drawing context's drawImage method.

The tool then uses the getImageData method of the 2D drawing context to extract the pixel data from the source canvas, which is stored in the imgData state variable as an ImageData object. This object contains a data property which is a Uint8ClampedArray representing the pixel values, with each pixel represented by four consecutive values for red, green, blue, and alpha channels. When the user interacts with the canvas, such as moving the mouse or clicking on a pixel, the handleMouseMove and handleClick functions are triggered, which use the mouse position and zoom factor to calculate the corresponding image coordinates and extract the color value at that position from the imgData array.

The Canvas API is used extensively in this tool, with methods like getContext, clearRect, fillRect, and stroke being used to render the image pixels as colored rectangles and draw grid lines. The canvas element's getBoundingClientRect method is also used to calculate its viewport coordinates, which are necessary for converting mouse positions from screen coordinates to image coordinates. React's useEffect hook is used to handle side effects such as updating the canvas rendering when the zoom factor or image data changes, ensuring that the tool remains responsive and efficient even with large images or high zoom levels.