Image Voice From The Past

async function processImage(originalImg, text = "Голос из прошлого", fontSize = 0, fontFamily = "Marck Script", textColor = "rgba(255, 255, 240, 0.75)", sepiaIntensity = 0.8, noiseAmount = 30, vignetteIntensity = 0.7) {
    /**
     * Dynamically loads a Google Font if it's not already available.
     * @param {string} fontName The name of the Google Font.
     */
    const loadGoogleFont = async (fontName) => {
        const fontId = `font-${fontName.replace(/\s+/g, '-')}`;
        if (document.getElementById(fontId)) {
            // Font link already added
            return;
        }

        try {
            await document.fonts.load(`1em "${fontName}"`);
            // Font is already available on the system, no need to load
        } catch (e) {
            // Font is not available, let's load it from Google Fonts
            const link = document.createElement('link');
            link.id = fontId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/\s+/g, '+')}&display=swap`;
            document.head.appendChild(link);
            // Wait for the font to be loaded
            await document.fonts.load(`1em "${fontName}"`);
        }
    };

    // 1. Create a canvas and get its 2D context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 2. Load the specified font if it's a known Google Font.
    // This allows for artistic text overlay.
    if (fontFamily === "Marck Script") {
        await loadGoogleFont(fontFamily);
    }
    
    // 3. Apply filters to create an old-photo look.
    // The 'sepia' filter is key for the vintage effect.
    // Adjusting brightness and contrast enhances the mood.
    ctx.filter = `sepia(${sepiaIntensity}) brightness(1.1) contrast(0.9)`;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    // Reset filters so they don't affect subsequent drawings (noise, vignette, text).
    ctx.filter = 'none';

    // 4. Add film grain/noise for a more authentic aged texture.
    if (noiseAmount > 0) {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        // Iterate over each pixel and add a random value to its color channels.
        for (let i = 0; i < data.length; i += 4) {
            const noise = (Math.random() - 0.5) * noiseAmount;
            data[i] += noise;     // Red
            data[i + 1] += noise; // Green
            data[i + 2] += noise; // Blue
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 5. Add a vignette effect to darken the corners.
    // This mimics the lens characteristics of old cameras and focuses attention on the center.
    if (vignetteIntensity > 0) {
        const outerRadius = Math.sqrt(Math.pow(canvas.width / 2, 2) + Math.pow(canvas.height / 2, 2));
        const gradient = ctx.createRadialGradient(
            canvas.width / 2, canvas.height / 2, outerRadius * 0.3, // Inner radius
            canvas.width / 2, canvas.height / 2, outerRadius      // Outer radius
        );
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteIntensity})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // 6. Overlay the text onto the image.
    if (text) {
        // If fontSize is 0, calculate a dynamic size based on image height.
        const finalFontSize = (fontSize <= 0) ? Math.round(canvas.height / 12) : fontSize;
        
        ctx.font = `${finalFontSize}px "${fontFamily}", cursive`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Add a subtle shadow for better readability and style.
        ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
        ctx.shadowBlur = 8;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;

        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
    }
    
    // 7. Return the final canvas element.
    return canvas;
}