Movie Database Photo Repository

async function processImage(originalImg, watermarkText = "КИНОПОИСК", position = "bottom-right", fontSize = 30, fontColor = "rgba(255, 255, 255, 0.7)", fontFamily = "Roboto Condensed", margin = 20) {

    /**
     * Dynamically loads a font from a given URL using the FontFace API.
     * Checks if the font is already loaded to avoid redundant operations.
     * @param {string} name The font-family name.
     * @param {string} url The URL of the font file (e.g., woff2).
     * @returns {Promise<boolean>} A promise that resolves to true if the font is loaded successfully, false otherwise.
     */
    const loadFont = async (name, url) => {
        // Use check() to see if the font is already available.
        if (document.fonts.check(`12px "${name}"`)) {
            return true;
        }
        const font = new FontFace(name, `url(${url})`);
        try {
            await font.load();
            document.fonts.add(font);
            return document.fonts.check(`12px "${name}"`);
        } catch (err) {
            console.error(`Font '${name}' failed to load from ${url}.`, err);
            return false;
        }
    };

    let effectiveFontFamily = fontFamily;
    // Attempt to load the specified Google Font. Fallback to a generic sans-serif on failure.
    if (fontFamily === "Roboto Condensed") {
        const isLoaded = await loadFont(
            "Roboto Condensed",
            "https://fonts.gstatic.com/s/robotocondensed/v27/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCk.woff2"
        );
        if (!isLoaded) {
            effectiveFontFamily = 'sans-serif';
        }
    }
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Check if the image has been fully loaded.
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        console.error("The provided image is not fully loaded or has invalid dimensions.");
        // Return a placeholder canvas with an error message.
        canvas.width = 400;
        canvas.height = 100;
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#ff0000';
        ctx.font = '16px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('Error: Image data is not available.', canvas.width / 2, canvas.height / 2);
        return canvas;
    }

    // Set canvas dimensions to match the original image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Prepare watermark text (uppercase to match the logo style).
    const textToDraw = watermarkText.toUpperCase();

    // Set text properties (font, color, shadow).
    ctx.font = `bold ${fontSize}px "${effectiveFontFamily}", Arial, sans-serif`;
    ctx.fillStyle = fontColor;
    ctx.textBaseline = 'alphabetic'; // Use alphabetic for more consistent bottom alignment.

    // Add a subtle drop shadow to enhance readability on various backgrounds.
    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    // Calculate the position for the watermark.
    let x, y;
    switch (position) {
        case "top-left":
            ctx.textAlign = 'left';
            y = margin + fontSize; // Adjust y for top alignment
            x = margin;
            break;
        case "top-right":
            ctx.textAlign = 'right';
            y = margin + fontSize; // Adjust y for top alignment
            x = canvas.width - margin;
            break;
        case "bottom-left":
            ctx.textAlign = 'left';
            y = canvas.height - margin;
            x = margin;
            break;
        case "center":
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            x = canvas.width / 2;
            y = canvas.height / 2;
            break;
        case "bottom-right":
        default:
            ctx.textAlign = 'right';
            y = canvas.height - margin;
            x = canvas.width - margin;
            break;
    }

    // Draw the watermark text onto the canvas.
    ctx.fillText(textToDraw, x, y);

    return canvas;
}