Image Textbox Scanner And Identifier Tool

function processImage(originalImg, language = "eng", boxColor = "#00ff00", lineWidth = 2) {
    // Create a container to hold the canvas and loading overlay
    const container = document.createElement("div");
    container.style.position = "relative";
    container.style.display = "inline-block";

    // Create the canvas and draw the original image
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    ctx.drawImage(originalImg, 0, 0);
    container.appendChild(canvas);

    // Create a loading overlay to indicate OCR progress
    const overlay = document.createElement("div");
    overlay.innerText = "Initializing Scanner...";
    overlay.style.position = "absolute";
    overlay.style.top = "10px";
    overlay.style.left = "10px";
    overlay.style.background = "rgba(0, 0, 0, 0.75)";
    overlay.style.color = "#fff";
    overlay.style.padding = "8px 12px";
    overlay.style.borderRadius = "4px";
    overlay.style.fontFamily = "sans-serif";
    overlay.style.fontSize = "14px";
    overlay.style.pointerEvents = "none";
    overlay.style.zIndex = "10";
    container.appendChild(overlay);

    // Run the scanning and extraction asynchronously
    (async () => {
        try {
            // Dynamically load Tesseract.js if not already available
            if (!window.Tesseract) {
                await new Promise((resolve, reject) => {
                    const script = document.createElement("script");
                    script.src = "https://unpkg.com/tesseract.js@4.1.1/dist/tesseract.min.js";
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            // Perform OCR using Tesseract.js
            const result = await window.Tesseract.recognize(canvas, language, {
                logger: info => {
                    if (info.status === "recognizing text") {
                        overlay.innerText = `Scanning textboxes... ${Math.round(info.progress * 100)}%`;
                    } else {
                        overlay.innerText = info.status.replace(/^[a-z]/, char => char.toUpperCase()) + "...";
                    }
                }
            });

            // Hide overlay upon completion
            overlay.style.display = "none";

            // Draw bounding boxes and text identifiers over the canvas
            ctx.lineWidth = lineWidth;
            ctx.font = "14px sans-serif";
            
            result.data.lines.forEach(line => {
                const { bbox, text } = line;
                const cleanedText = text.replace(/\n/g, '').trim();
                if (!cleanedText) return;

                // Draw bounding box
                ctx.beginPath();
                ctx.strokeStyle = boxColor;
                ctx.rect(bbox.x0, bbox.y0, bbox.x1 - bbox.x0, bbox.y1 - bbox.y0);
                ctx.stroke();

                // Draw semi-transparent background for text visibility
                const textWidth = ctx.measureText(cleanedText).width;
                const textX = bbox.x0;
                const textY = bbox.y0 > 18 ? bbox.y0 - 18 : bbox.y0 + (bbox.y1 - bbox.y0) + 4;
                
                ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
                ctx.fillRect(textX, textY, textWidth + 8, 18);

                // Draw the identified text
                ctx.fillStyle = boxColor;
                ctx.fillText(cleanedText, textX + 4, textY + 13);
            });

        } catch (error) {
            console.error("OCR Scanner Error:", error);
            overlay.innerText = "Error scanning image. Check console.";
            overlay.style.background = "rgba(255, 0, 0, 0.75)";
        }
    })();

    // Return the container immediately while processing happens asynchronously
    return container;
}