Image For The Tale Of The Mermaid’s Wedding

async function processImage(originalImg, titleText = "The Tale of the Mermaid's Wedding", overlayColor = "0, 100, 180", effectIntensity = 0.35, bubbleCount = 150) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 3. Apply an "underwater" color tint effect
    // This effect works by blending the original image pixels with the overlayColor.
    try {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        const [rTint, gTint, bTint] = overlayColor.split(',').map(Number);

        for (let i = 0; i < data.length; i += 4) {
            // Apply a simple linear interpolation for color blending
            data[i] = data[i] * (1 - effectIntensity) + rTint * effectIntensity; // Red channel
            data[i + 1] = data[i + 1] * (1 - effectIntensity) + gTint * effectIntensity; // Green channel
            data[i + 2] = data[i + 2] * (1 - effectIntensity) + bTint * effectIntensity; // Blue channel
        }
        ctx.putImageData(imageData, 0, 0);
    } catch (e) {
        console.error("Could not manipulate pixel data (perhaps from a cross-origin image):", e);
        // Fallback to a simple overlay rect if pixel manipulation fails
        ctx.globalAlpha = effectIntensity;
        ctx.fillStyle = `rgb(${overlayColor})`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.globalAlpha = 1.0;
    }

    // 4. Add magical light orbs/bubbles
    for (let i = 0; i < bubbleCount; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * (canvas.width / 50) + 5;

        // Use a radial gradient to make the orbs glow
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
        gradient.addColorStop(0, `rgba(255, 255, 255, ${0.4 * effectIntensity})`);
        gradient.addColorStop(0.8, `rgba(200, 225, 255, ${0.2 * effectIntensity})`);
        gradient.addColorStop(1, `rgba(200, 225, 255, 0)`);

        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
    }

    // 5. Add the title text with a beautiful script font from Google Fonts
    if (titleText && titleText.trim() !== "") {
        const fontName = 'Dancing Script';
        try {
            // Dynamically load the Google Font.
            // This is the modern way using the FontFace API.
            const font = new FontFace(fontName, `url(https://fonts.gstatic.com/s/dancingscript/v25/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Rep8hNP6pnxP.woff2)`);
            await font.load();
            document.fonts.add(font);

            // Calculate a dynamic font size based on image width
            const fontSize = Math.max(24, Math.floor(canvas.width / 25));
            const yPos = canvas.height - (fontSize * 1.2);

            ctx.font = `bold ${fontSize}px "${fontName}", cursive`;
            ctx.fillStyle = 'rgba(255, 255, 240, 0.9)';
            ctx.textAlign = 'center';
            ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;

            ctx.fillText(titleText, canvas.width / 2, yPos);
        } catch (e) {
            console.error("Could not load the custom font:", e);
            // Fallback to a web-safe font
            const fontSize = Math.max(24, Math.floor(canvas.width / 30));
            ctx.font = `bold ${fontSize}px cursive`;
            ctx.fillStyle = 'rgba(255, 255, 240, 0.9)';
            ctx.textAlign = 'center';
            ctx.fillText(titleText, canvas.width / 2, canvas.height - (fontSize*1.2));
        }
    }

    // 6. Return the final canvas
    return canvas;
}