Image Name Translator Screenshot Tool

/**
 * Performs OCR on an image, translates the found text, and overlays it on the original image.
 * This function is asynchronous and may take some time to complete depending on the image size and text complexity.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} targetLang The target language for translation (ISO 639-1 code, e.g., 'en', 'es', 'ja').
 * @param {string} ocrLang The language of the text in the image for OCR (Tesseract.js language code, e.g., 'eng', 'spa', 'jpn').
 * @param {string} bgColor The background color to use for the box covering the original text.
 * @param {string} textColor The color of the translated text.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a canvas element with the translated image.
 */
async function processImage(originalImg, targetLang = 'en', ocrLang = 'eng', bgColor = 'black', textColor = 'white') {
    // Dynamically load the Tesseract.js library if it's not already available.
    if (typeof Tesseract === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
        script.defer = true;
        document.head.appendChild(script);
        await new Promise((resolve, reject) => {
            script.onload = resolve;
            script.onerror = reject;
        });
    }

    // Set up the canvas to match the image dimensions.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    // Helper function to display progress updates on the canvas.
    const updateProgress = (message) => {
        // Redraw image to clear previous text, then overlay a semi-transparent layer.
        ctx.drawImage(originalImg, 0, 0);
        ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw the progress text.
        ctx.fillStyle = 'white';
        ctx.font = `bold ${Math.min(canvas.width, canvas.height) / 20}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(message, canvas.width / 2, canvas.height / 2);
    };

    updateProgress('Initializing OCR...');

    // A helper function to translate text using the MyMemory Translated API.
    const translateText = async (text, target) => {
        if (!text || !text.trim()) return text;
        try {
            const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=auto|${target}`;
            const response = await fetch(url);
            if (!response.ok) {
                console.error("Translation API request failed:", response.statusText);
                return text; // Return original text on failure
            }
            const data = await response.json();
            if (data.responseData && data.responseData.translatedText) {
                return data.responseData.translatedText;
            }
            return text; // Return original if no translation found
        } catch (error) {
            console.error("Translation error:", error);
            return text; // Return original on error
        }
    };

    // Create a Tesseract worker to perform OCR.
    const worker = await Tesseract.createWorker(ocrLang, 1, {
        logger: m => {
            if (m.status === 'recognizing text') {
                const progress = (m.progress * 100).toFixed(0);
                updateProgress(`Recognizing Text: ${progress}%`);
            } else {
                updateProgress(`OCR: ${m.status}`);
            }
        },
    });

    try {
        // Recognize text in the image. We process text line by line.
        const { data: { lines } } = await worker.recognize(originalImg);

        // Translate all recognized lines in parallel.
        updateProgress('Translating text...');
        const translationPromises = lines.map(line => translateText(line.text, targetLang));
        const translatedLines = await Promise.all(translationPromises);

        // Redraw the original image to clear the progress indicator.
        ctx.drawImage(originalImg, 0, 0);
        
        // Overlay the translations on the image.
        lines.forEach((line, index) => {
            const translatedText = translatedLines[index];
            if (!translatedText || !translatedText.trim()) return;

            const bbox = line.bbox;
            const boxWidth = bbox.x1 - bbox.x0;
            const boxHeight = bbox.y1 - bbox.y0;

            // 1. Cover the original text with a solid background color.
            ctx.fillStyle = bgColor;
            ctx.fillRect(bbox.x0, bbox.y0, boxWidth, boxHeight);

            // 2. Prepare to draw the new translated text.
            ctx.fillStyle = textColor;
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'center';

            // 3. Dynamically adjust font size to fit inside the bounding box.
            let fontSize = boxHeight * 0.9; // Start with a font size based on the line height.
            ctx.font = `bold ${fontSize}px Arial`;
            
            // Reduce font size until the text width fits within the box.
            while (ctx.measureText(translatedText).width > boxWidth * 0.95 && fontSize > 8) {
                fontSize--;
                ctx.font = `bold ${fontSize}px Arial`;
            }

            // 4. Draw the text centered in the box.
            const centerX = bbox.x0 + boxWidth / 2;
            const centerY = bbox.y0 + boxHeight / 2;
            ctx.fillText(translatedText, centerX, centerY);
        });

    } catch (error) {
        console.error("An error occurred during image processing:", error);
        updateProgress('An error occurred.'); // Display error on canvas
    } finally {
        // Terminate the worker to free up resources.
        await worker.terminate();
    }

    return canvas;
}