Image Subtitles Extraction Tool

/**
 * Extracts text from the lower portion of an image using OCR, suitable for subtitles.
 * This function dynamically loads the Tesseract.js library to perform the recognition.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} lang A comma-separated string of languages for Tesseract to use (e.g., 'eng,rus,jpn'). Defaults to 'eng,rus'. See Tesseract.js docs for available language codes.
 * @param {number} subtitleAreaHeight A number between 0.0 and 1.0 representing the percentage of the image height from the bottom to scan for subtitles. Defaults to 0.25 (the bottom 25%).
 * @param {number} threshold A number between 0 and 255 for image binarization. Pixels with a grayscale value above this threshold will become white, and those below will become black. This helps improve OCR accuracy. Defaults to 180.
 * @returns {HTMLElement} A div element that displays the status of the OCR process and ultimately shows the extracted text.
 */
async function processImage(originalImg, lang = 'eng,rus', subtitleAreaHeight = 0.25, threshold = 180) {
    const outputContainer = document.createElement('div');
    outputContainer.style.fontFamily = 'monospace, sans-serif';
    outputContainer.style.padding = '15px';
    outputContainer.style.backgroundColor = '#f0f0f0';
    outputContainer.style.border = '1px solid #ccc';
    outputContainer.style.borderRadius = '5px';
    outputContainer.style.whiteSpace = 'pre-wrap';
    outputContainer.style.wordWrap = 'break-word';

    const updateStatus = (message) => {
        outputContainer.textContent = message;
    };

    updateStatus('Initializing OCR process...');

    // Self-invoking async function to perform the OCR and update the container
    (async () => {
        try {
            // 1. Dynamically load Tesseract.js if not already present
            if (typeof Tesseract === 'undefined') {
                updateStatus('Loading OCR engine (Tesseract.js)...');
                await new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
                    script.onload = resolve;
                    script.onerror = reject;
                    document.head.appendChild(script);
                });
            }

            // 2. Prepare the canvas and preprocess the image
            updateStatus('Preprocessing image for OCR...');
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d', {
                willReadFrequently: true
            });

            const cropWidth = originalImg.width;
            const cropHeight = Math.floor(originalImg.height * Math.max(0, Math.min(1, subtitleAreaHeight)));
            const cropY = originalImg.height - cropHeight;

            canvas.width = cropWidth;
            canvas.height = cropHeight;

            // Draw the cropped (bottom) part of the image onto the canvas
            ctx.drawImage(originalImg, 0, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);

            // Apply preprocessing: grayscale and threshold (binarization)
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            for (let i = 0; i < data.length; i += 4) {
                // A common luminance calculation
                const avg = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
                const color = avg > threshold ? 255 : 0;
                data[i] = color; // red
                data[i + 1] = color; // green
                data[i + 2] = color; // blue
            }
            ctx.putImageData(imageData, 0, 0);

            // 3. Perform OCR
            updateStatus('Recognizing text... (This may take a moment)');
            const formattedLang = lang.replace(/,/g, '+');
            const worker = await Tesseract.createWorker(formattedLang);
            const {
                data: {
                    text
                }
            } = await worker.recognize(canvas);
            await worker.terminate();

            // 4. Display the result
            const resultText = text.trim();
            updateStatus(resultText || '[No text detected in the specified area.]');

        } catch (error) {
            console.error('An error occurred during subtitle extraction:', error);
            outputContainer.textContent = `Error: ${error.message}. Check the console for more details.`;
            outputContainer.style.color = 'red';
        }
    })();

    return outputContainer;
}