Image Of Good Milk

/**
 * Applies a "Good Milk" effect to an image by adding a creamy white overlay
 * and the text "Доброе молоко" (Good Milk).
 * This function is an artistic interpretation of the provided tool name and description.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} text The text to overlay on the image. Defaults to "Доброе молоко".
 * @param {number} fontSize The desired font size in pixels. The final size will be adaptive to the image dimensions but will not exceed this value. Defaults to 80.
 * @param {string} fontColor The color of the text. Defaults to '#ffffff'.
 * @param {string} overlayColor The color of the semi-transparent overlay. Defaults to '#ffffff'.
 * @param {number} overlayOpacity The opacity of the overlay, from 0 (transparent) to 1 (opaque). Defaults to 0.2.
 * @param {string} shadowColor The color of the text shadow. Defaults to 'rgba(0, 0, 0, 0.5)'.
 * @param {number} shadowBlur The blur level for the text shadow. Defaults to 10.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a new canvas element with the effect applied.
 */
async function processImage(originalImg, text = 'Доброе молоко', fontSize = 80, fontColor = '#ffffff', overlayColor = '#ffffff', overlayOpacity = 0.2, shadowColor = 'rgba(0, 0, 0, 0.5)', shadowBlur = 10) {

    const fontName = 'Comfortaa';

    // Helper function to dynamically load the Google Font
    const loadGoogleFont = async (font) => {
        const fontUrl = `https://fonts.googleapis.com/css2?family=${font.replace(' ', '+')}:wght@400;700&display=swap`;
        const fontId = `font-${font.replace(' ', '-')}`;

        if (!document.getElementById(fontId)) {
            const link = document.createElement('link');
            link.id = fontId;
            link.rel = 'stylesheet';
            link.href = fontUrl;
            document.head.appendChild(link);
            try {
                await document.fonts.load(`1em ${font}`);
            } catch (e) {
                console.error(`Font ${font} could not be loaded.`, e);
                // The browser will fall back to a default font.
            }
        }
    };

    // Load the font before proceeding
    await loadGoogleFont(fontName);

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

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

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

    // Apply the semi-transparent "milky" overlay
    ctx.globalAlpha = Math.max(0, Math.min(1, overlayOpacity)); // Clamp opacity between 0 and 1
    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = 1.0; // Reset alpha for subsequent drawing

    // Configure text settings
    // Make font size adaptive, using the parameter as a maximum
    const adaptiveFontSize = Math.floor(Math.min(canvas.width / 10, canvas.height / 10));
    const finalFontSize = Math.min(fontSize, adaptiveFontSize);

    ctx.font = `bold ${finalFontSize}px ${fontName}, cursive`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Add a subtle shadow to make the text pop
    ctx.shadowColor = shadowColor;
    ctx.shadowBlur = shadowBlur;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    // Draw the text in the center of the image
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    ctx.fillText(text, centerX, centerY);

    // Return the canvas with the applied effect
    return canvas;
}