Image Language Editor

async function processImage(
    originalImg,
    text = "Enter translated text here",
    fontFamily = "Arial",
    fontSize = 32,
    textColor = "#FFFFFF",
    textBgColor = "transparent",
    strokeColor = "#000000",
    strokeWidth = 2,
    xPercent = 50,
    yPercent = 80
) {
    // Attempt to dynamically load Google / Custom Font if it isn't a standard web-safe font
    const webSafeFonts = [
        "Arial", "Verdana", "Helvetica", "Tahoma", "Trebuchet MS", 
        "Times New Roman", "Georgia", "Garamond", "Courier New", 
        "Brush Script MT", "sans-serif", "serif", "monospace"
    ];
    
    if (!webSafeFonts.includes(fontFamily)) {
        const fontUrl = `https://fonts.googleapis.com/css2?family=${fontFamily.replace(/ /g, '+')}&display=swap`;
        if (!document.querySelector(`link[href="${fontUrl}"]`)) {
            const link = document.createElement('link');
            link.href = fontUrl;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
        }
        try {
            // Wait for the font to be loaded to render correctly on the canvas
            await document.fonts.load(`${fontSize}px "${fontFamily}"`);
        } catch (e) {
            console.warn(`Could not load font: ${fontFamily}, falling back to default.`, e);
        }
    }

    // Set up canvas
    const canvas = document.createElement("canvas");
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext("2d");

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

    // Apply text styling
    ctx.font = `${fontSize}px "${fontFamily}", sans-serif`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Support multiline text inputs (split by \n or literal slash-n)
    const lines = text.split(/\\n|\n/);
    const x = (canvas.width * xPercent) / 100;
    let y = (canvas.height * yPercent) / 100;
    
    const lineHeight = fontSize * 1.2;
    // Adjust Y so the block of text is centered around the given percentage point
    y -= (lines.length * lineHeight) / 2 - (lineHeight / 2);

    // If a text background color is provided (such as for replacing original comic/manga language text)
    if (textBgColor && textBgColor !== "transparent" && textBgColor !== "rgba(0,0,0,0)") {
        const padding = fontSize * 0.5;
        const maxLineWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
        const totalHeight = lines.length * lineHeight;
        
        ctx.fillStyle = textBgColor;
        ctx.fillRect(
             x - (maxLineWidth / 2) - padding,
             y - (lineHeight / 2) - padding,
             maxLineWidth + padding * 2,
             totalHeight + padding * 2
        );
        // Restore text color
        ctx.fillStyle = textColor;
    }

    // Render the text lines
    for (const line of lines) {
        if (strokeWidth > 0 && strokeColor !== "transparent") {
            ctx.strokeText(line, x, y);
        }
        ctx.fillText(line, x, y);
        y += lineHeight;
    }

    return canvas;
}