Image Motivation Quote Generator

async function processImage(originalImg, quoteText = "Не хочу проигрывать!", textColor = "white", fontFamily = "Oswald", fontSizeRatio = 10, overlayDarkness = 0.4, borderRatio = 5, borderColor = "black") {
    /**
     * Dynamically loads a font to be used on the canvas.
     * @param {string} family The font-family name.
     * @param {string} url The URL to the font file.
     * @param {object} descriptors Font descriptors.
     * @returns {Promise<void>} A promise that resolves when the font is loaded.
     */
    const loadFont = async (family, url, descriptors) => {
        // Check if the font is already loaded to avoid re-fetching.
        if ([...document.fonts].some(f => f.family === family)) {
            return;
        }
        try {
            const font = new FontFace(family, `url(${url})`, descriptors);
            await font.load();
            document.fonts.add(font);
        } catch (error) {
            console.error(`Could not load font: ${family}`, error);
            // Propagate the error to allow the caller to handle fallbacks.
            throw error;
        }
    };

    // Use a bold, impactful font like Oswald. Load it dynamically.
    // If the user specifies another font, we'll try to use that directly.
    let effectiveFontFamily = fontFamily;
    if (fontFamily === "Oswald") {
        try {
            // Font file from Google Fonts CDN
            const fontUrl = 'https://fonts.gstatic.com/s/oswald/v49/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZTaR.woff2';
            await loadFont('Oswald', fontUrl, { weight: '700' });
        } catch (e) {
            // If Oswald fails to load, fall back to a web-safe font.
            console.warn("Falling back to Impact font.");
            effectiveFontFamily = 'Impact, sans-serif';
        }
    }

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

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Calculate dimensions including the border
    // Border size is relative to the smaller dimension of the image for a uniform look.
    const borderSize = (Math.min(imgWidth, imgHeight) * borderRatio) / 100;
    const canvasWidth = imgWidth + borderSize * 2;
    const canvasHeight = imgHeight + borderSize * 2;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    // Draw the border by filling the entire canvas with the border color
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // Draw the original image centered on the canvas
    ctx.drawImage(originalImg, borderSize, borderSize, imgWidth, imgHeight);

    // Apply a darkening overlay to make the text more readable
    if (overlayDarkness > 0 && overlayDarkness <= 1) {
        ctx.fillStyle = `rgba(0, 0, 0, ${overlayDarkness})`;
        ctx.fillRect(borderSize, borderSize, imgWidth, imgHeight);
    }

    // Set up text properties
    const fontSize = (imgWidth * fontSizeRatio) / 100;
    ctx.font = `700 ${fontSize}px ${effectiveFontFamily}`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
    ctx.shadowBlur = 10;

    // Logic to wrap text if it's too long
    const textMaxWidth = imgWidth * 0.9; // Use 90% of image width for text
    const lineHeight = fontSize * 1.2;
    const words = quoteText.toUpperCase().split(' ');
    const lines = [];
    let currentLine = words[0];

    for (let i = 1; i < words.length; i++) {
        const word = words[i];
        const testLine = currentLine + " " + word;
        const metrics = ctx.measureText(testLine);
        if (metrics.width > textMaxWidth) {
            lines.push(currentLine);
            currentLine = word;
        } else {
            currentLine = testLine;
        }
    }
    lines.push(currentLine);

    // Calculate the starting Y position to vertically center the text block
    const totalTextHeight = lines.length * lineHeight;
    const startY = (canvasHeight / 2) - (totalTextHeight / 2);

    // Draw each line of text
    lines.forEach((line, index) => {
        const y = startY + (index * lineHeight) + (lineHeight / 2);
        ctx.fillText(line, canvasWidth / 2, y);
    });

    return canvas;
}