Image Title Translator

async function processImage(
    originalImg,
    titleText = 'Hello World',
    sourceLang = 'en',
    targetLang = 'es',
    position = 'bottom-center',
    font = 'Arial',
    fontSize = 48,
    textColor = 'white',
    backgroundColor = 'rgba(0, 0, 0, 0.5)',
    padding = 10
) {
    /**
     * Translates a given text string using a free public API.
     * @returns {Promise<string>} The translated text, or the original text on failure.
     */
    async function getTranslatedText() {
        if (sourceLang === targetLang) {
            return titleText;
        }
        try {
            const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(titleText)}&langpair=${sourceLang}|${targetLang}`;
            const response = await fetch(url);
            if (!response.ok) {
                console.error(`Translation API error! status: ${response.status}`);
                return titleText; // Fallback to original text
            }
            const data = await response.json();
            if (data && data.responseData && data.responseData.translatedText) {
                return data.responseData.translatedText;
            } else {
                console.error("Translation API did not return a valid translation:", data);
                return titleText; // Fallback to original text
            }
        } catch (error) {
            console.error("Failed to fetch translation:", error);
            return titleText; // Fallback to original text on network error
        }
    }

    const translatedText = await getTranslatedText();

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the original image's native size
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Configure text styling
    ctx.font = `bold ${fontSize}px ${font}`;

    // Measure the text to determine the size of the background box
    const textMetrics = ctx.measureText(translatedText);
    const textWidth = textMetrics.width;
    // A common approximation for text height that works well with padding
    const textHeight = fontSize;
    const boxWidth = textWidth + padding * 2;
    const boxHeight = textHeight + padding * 2;

    // Determine text alignment from the position parameter
    if (position.includes('left')) {
        ctx.textAlign = 'left';
    } else if (position.includes('right')) {
        ctx.textAlign = 'right';
    } else {
        ctx.textAlign = 'center';
    }

    if (position.startsWith('top')) {
        ctx.textBaseline = 'top';
    } else if (position.startsWith('bottom')) {
        ctx.textBaseline = 'bottom';
    } else {
        ctx.textBaseline = 'middle';
    }

    // Calculate the top-left coordinate (boxX, boxY) of the background box
    const margin = padding > 0 ? padding : 10;
    let boxX, boxY;

    // Horizontal position
    if (ctx.textAlign === 'left') {
        boxX = margin;
    } else if (ctx.textAlign === 'right') {
        boxX = canvas.width - boxWidth - margin;
    } else { // center
        boxX = (canvas.width - boxWidth) / 2;
    }

    // Vertical position
    if (ctx.textBaseline === 'top') {
        boxY = margin;
    } else if (ctx.textBaseline === 'bottom') {
        boxY = canvas.height - boxHeight - margin;
    } else { // middle
        boxY = (canvas.height - boxHeight) / 2;
    }

    // Draw the background box
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(boxX, boxY, boxWidth, boxHeight);

    // Calculate the final coordinates for the text based on alignment
    let textX, textY;
    if (ctx.textAlign === 'left') {
        textX = boxX + padding;
    } else if (ctx.textAlign === 'right') {
        textX = boxX + boxWidth - padding;
    } else { // center
        textX = boxX + boxWidth / 2;
    }

    if (ctx.textBaseline === 'top') {
        textY = boxY + padding;
    } else if (ctx.textBaseline === 'bottom') {
        textY = boxY + boxHeight - padding;
    } else { // middle
        textY = boxY + boxHeight / 2;
    }

    // Draw the translated text
    ctx.fillStyle = textColor;
    ctx.fillText(translatedText, textX, textY);

    // Return the final canvas element
    return canvas;
}