Extract Text From Images Online Extract visible text from images using Canvas pixel analysis and pattern detection.

The tool works by first drawing the uploaded image to a Canvas element using the `drawImage` method, and then extracting the pixel data via the `getImageData` method. This data is stored in a Uint8Array, which is then converted to grayscale using the luminance formula, where each pixel value is calculated as 0.299 times the red component, 0.587 times the green component, and 0.114 times the blue component. The resulting grayscale values are used for edge detection, specifically horizontal gradient calculation, to identify areas with high contrast that may contain text.

Edge detection is performed by iterating over each pixel in the grayscale array and calculating the absolute difference between adjacent pixels, both horizontally and vertically. These differences are stored in a separate Uint8Array, where higher values indicate stronger edges. The tool then divides the image into 40x40 blocks and calculates the edge density within each block. If the density is above a certain threshold, typically between 0.15 and 0.8, the block is considered to contain potential text and its bounding box is added to the list of detected regions.

The detected regions are then merged using a simple algorithm that checks for adjacent regions with similar vertical positions and merges them into larger blocks. This reduces noise and improves the accuracy of text area identification. The tool uses React state management, specifically `useState` and `useCallback`, to store and update the image data, detected regions, and extracted text. It also utilizes the `URL.createObjectURL` method to create a URL for the uploaded image and the `navigator.clipboard.writeText` method to copy the extracted text to the user's clipboard.

The tool processes images in the browser using JavaScript and the Canvas API, without relying on any external libraries or services. It supports images up to 1200 pixels wide, scaling them down while maintaining their aspect ratio to optimize processing time. The image is analyzed at the pixel level, allowing for precise detection of text regions. By combining these techniques, the tool provides a lightweight and efficient solution for detecting text in images, making it suitable for a variety of applications, including data extraction and document analysis.