Image To Website Text Identifier Tool

async function processImage(originalImg, language = 'eng') {
    // Dynamically load Tesseract.js if it's not already available
    if (!window.Tesseract) {
        await new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    // Draw the image on a canvas to prevent potential cross-origin or formatting issues
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth || originalImg.width || 1;
    canvas.height = originalImg.naturalHeight || originalImg.height || 1;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    let extractedText = '';
    try {
        // Run OCR text recognition using Tesseract.js
        const result = await window.Tesseract.recognize(canvas, language);
        extractedText = result.data.text;
    } catch (err) {
        extractedText = 'Error during text extraction: ' + err.message;
    }

    // Create a styled container element to hold the output
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '20px';
    container.style.backgroundColor = '#f4f6f8';
    container.style.border = '1px solid #dcdcdc';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
    container.style.color = '#333';
    container.style.textAlign = 'left';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';

    // Header title
    const header = document.createElement('h3');
    header.textContent = 'Identified Text';
    header.style.marginTop = '0';
    header.style.marginBottom = '15px';
    header.style.color = '#2c3e50';
    header.style.borderBottom = '2px solid #3498db';
    header.style.paddingBottom = '5px';
    container.appendChild(header);

    // Output block section
    const textNode = document.createElement('pre');
    textNode.style.margin = '0';
    textNode.style.padding = '15px';
    textNode.style.backgroundColor = '#fff';
    textNode.style.border = '1px solid #eee';
    textNode.style.borderRadius = '4px';
    textNode.style.whiteSpace = 'pre-wrap';
    textNode.style.wordWrap = 'break-word';
    textNode.style.fontSize = '14px';
    textNode.style.lineHeight = '1.6';
    textNode.style.color = extractedText.trim() ? '#333' : '#888';
    textNode.textContent = extractedText.trim() ? extractedText : 'No text could be identified from the image.';
    
    container.appendChild(textNode);

    return container;
}