Image URL To Title Translator

function processImage(originalImg, removeExtension = 1, replaceChars = '_-', capitalize = 'words', fontSize = 32, fontFamily = 'Arial', textColor = '#000000', backgroundColor = 'transparent') {
    const url = originalImg.src;
    let title = '';
    let isPlaceholder = false;

    // Phase 1: Extract a filename or placeholder text from the URL
    if (url.startsWith('data:')) {
        title = 'Embedded Image';
        isPlaceholder = true;
    } else if (url.startsWith('blob:')) {
        title = 'Local File';
        isPlaceholder = true;
    } else {
        try {
            // Use the URL API for robust parsing of absolute URLs
            const path = new URL(url).pathname;
            title = decodeURIComponent(path.substring(path.lastIndexOf('/') + 1));
        } catch (e) {
            // Fallback for relative paths or other non-standard URLs
            const parts = url.split('/');
            let filename = parts.pop() || parts.pop(); // Handles trailing slash
            if (filename) {
                // Remove query strings and hash fragments
                filename = filename.split('?')[0].split('#')[0];
                try {
                    title = decodeURIComponent(filename);
                } catch (decodeError) {
                    title = filename; // Use as-is if decoding fails
                }
            }
        }
    }

    // Use a default title if extraction failed
    if (!title) {
        title = 'Untitled';
        isPlaceholder = true;
    }

    // Phase 2: Process the extracted text to make it human-readable (if not a placeholder)
    if (!isPlaceholder) {
        // Remove file extension if requested
        if (Number(removeExtension) === 1) {
            const lastDotIndex = title.lastIndexOf('.');
            if (lastDotIndex > 0) { // Ensures we don't remove names like ".htaccess"
                title = title.substring(0, lastDotIndex);
            }
        }

        // Replace specified characters with a space
        if (replaceChars && typeof replaceChars === 'string') {
            const escapedChars = replaceChars.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
            const regex = new RegExp(`[${escapedChars}]`, 'g');
            title = title.replace(regex, ' ');
        }

        // Clean up extra whitespace
        title = title.trim().replace(/\s+/g, ' ');

        // Apply capitalization style
        switch (capitalize.toLowerCase()) {
            case 'words':
                title = title.split(' ').map(word =>
                    word.length > 0 ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() : ''
                ).join(' ');
                break;
            case 'first':
                title = title.length > 0 ? title.charAt(0).toUpperCase() + title.slice(1).toLowerCase() : '';
                break;
            case 'none':
            default:
                // No change
                break;
        }
    }

    // Phase 3: Render the final title onto a canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set font style and measure the text to size the canvas
    const font = `${fontSize}px "${fontFamily}"`;
    ctx.font = font;

    const textMetrics = ctx.measureText(title);
    const padding = 20;
    const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;

    canvas.width = textMetrics.width + padding * 2;
    canvas.height = Math.max(textHeight, fontSize) + padding * 2;

    // Re-apply context settings as they are reset when canvas is resized
    ctx.font = font;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Draw the background color if one is provided
    if (backgroundColor !== 'transparent') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // Draw the text in the center of the canvas
    ctx.fillStyle = textColor;
    ctx.fillText(title, canvas.width / 2, canvas.height / 2);

    return canvas;
}