Image Name Translator Identifier Screenshot Tool

/**
 * Processes an image to perform Optical Character Recognition (OCR), translates the recognized text,
 * and overlays the translation on top of the original image.
 *
 * This function relies on the Tesseract.js library for OCR and an unofficial Google Translate API
 * for translation. Both are loaded/called dynamically.
 *
 * @param {Image} originalImg The original Javascript Image object to process.
 * @param {string} sourceLang The language of the text in the image. Must be a valid Tesseract language code (e.g., 'eng', 'jpn', 'chi_sim', 'fra'). A list can be found on the Tesseract.js GitHub page.
 * @param {string} targetLang The language to translate the text into. Should be a standard ISO 639-1 code (e.g., 'en', 'ja', 'zh-CN', 'fr').
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the original image with translated text overlaid.
 */
async function processImage(originalImg, sourceLang = 'eng', targetLang = 'eng') {
    /**
     * Dynamically loads a script and returns a promise that resolves when the script is loaded.
     * @param {string} src The URL of the script to load.
     * @returns {Promise<void>}
     */
    const loadScript = src => new Promise((resolve, reject) => {
        // Avoid re-loading the script if it's already present
        if (document.querySelector(`script[src="${src}"]`)) {
            resolve();
            return;
        }
        const script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });

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

    // Load Tesseract.js library from a CDN
    try {
        if (typeof Tesseract === 'undefined') {
            await loadScript('https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js');
        }
    } catch (error) {
        console.error('Failed to load Tesseract.js:', error);
        ctx.fillStyle = 'red';
        ctx.font = '20px Arial';
        ctx.fillText('Error: Could not load OCR library.', 10, 30);
        return canvas;
    }

    // Display a "Processing..." message to the user as OCR can be slow
    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const baseFontSize = Math.max(16, Math.min(canvas.width, canvas.height) / 20);
    ctx.font = `${baseFontSize}px Arial`;
    ctx.fillText('Processing image...', canvas.width / 2, canvas.height / 2 - baseFontSize);
    ctx.font = `${baseFontSize * 0.6}px Arial`;
    ctx.fillText('This can take a minute depending on image size and language.', canvas.width / 2, canvas.height / 2 + baseFontSize * 0.5);

    try {
        // Create a Tesseract worker, run OCR, and then terminate the worker
        const worker = await Tesseract.createWorker(sourceLang);
        const { data } = await worker.recognize(originalImg);
        await worker.terminate();
        
        // Redraw the original image to clear the "Processing..." message
        ctx.drawImage(originalImg, 0, 0);

        // Process each line of recognized text
        const translationTasks = data.lines.map(async (line) => {
            const text = line.text.trim();
            if (!text) {
                return null; // Skip empty lines
            }

            let translatedText = text;
            // Only call the translation API if the source and target languages are different
            if (sourceLang !== targetLang) {
                try {
                    // Use a free, unofficial Google Translate API endpoint
                    const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodeURIComponent(text)}`;
                    const response = await fetch(url);
                    if (!response.ok) {
                        throw new Error(`Translation API request failed with status ${response.status}`);
                    }
                    const result = await response.json();
                    
                    // The result is a nested array; we need to concatenate the translated segments
                    if (result && result[0]) {
                        translatedText = result[0].map(segment => segment[0]).join('');
                    }
                } catch (e) {
                    console.error(`Translation failed for "${text}":`, e);
                    // If translation fails, use the original recognized text with an error marker
                    translatedText = `[!] ${text}`;
                }
            }

            return {
                bbox: line.bbox,
                text: translatedText,
            };
        });

        // Wait for all translation tasks to complete
        const drawData = (await Promise.all(translationTasks)).filter(Boolean);

        // Draw the results onto the canvas
        drawData.forEach(item => {
            const { x0, y0, x1, y1 } = item.bbox;
            const width = x1 - x0;
            const height = y1 - y0;

            // Draw a solid background rectangle to cover the original text
            ctx.fillStyle = 'white';
            ctx.fillRect(x0, y0, width, height);

            // Set text style for the translated text
            ctx.fillStyle = 'black';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'middle';

            // Dynamically adjust font size to fit the text within the bounding box width
            let fontSize = height * 0.9; // Start with a font size 90% of the box height
            ctx.font = `${fontSize}px sans-serif`;

            while (ctx.measureText(item.text).width > width && fontSize > 5) {
                fontSize--;
                ctx.font = `${fontSize}px sans-serif`;
            }

            // Draw the translated text, vertically centered in the bounding box
            ctx.fillText(item.text, x0, y0 + height / 2);
        });

    } catch (err) {
        console.error("An error occurred during the OCR process:", err);
        // If OCR fails, redraw the original image and display an error message
        ctx.drawImage(originalImg, 0, 0);
        ctx.fillStyle = 'red';
        ctx.font = '20px Arial';
        ctx.fillText('Error: Failed to process image with OCR.', 10, 30);
    }

    return canvas;
}