Image Interpretation Tool For ‘It’s Hard To Be Small’

async function processImage(originalImg, scale = 0.25, text = "Трудно быть маленьким", textColor = "rgba(255, 255, 255, 0.8)", blurAmount = 15, backgroundSaturation = 20) {
    /**
     * Dynamically loads a Google Font to be used on the canvas.
     * @param {string} fontName - The name of the font family.
     * @param {string} fontUrl - The URL to the font file (e.g., woff2).
     */
    const loadFont = async (fontName, fontUrl) => {
        // Check if the font is already loaded to avoid redundant loads.
        if (Array.from(document.fonts).some(f => f.family === fontName)) {
            return;
        }
        const font = new FontFace(fontName, `url(${fontUrl})`);
        try {
            await font.load();
            document.fonts.add(font);
        } catch (e) {
            console.error(`Font ${fontName} could not be loaded:`, e);
        }
    };

    // 1. Load the required font. We use a nice serif font with Cyrillic support.
    await loadFont('Lora', 'https://fonts.gstatic.com/s/lora/v26/0QI6MX1D_JOuGQbT0g.woff2');

    // 2. Create a canvas with a fixed 16:9 aspect ratio for a cinematic feel.
    const canvas = document.createElement('canvas');
    const canvasWidth = 1280;
    const canvasHeight = 720;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext('2d');

    // 3. Create the overwhelming background by drawing a blurred, desaturated,
    // and darkened version of the original image, scaled to cover the canvas.
    ctx.filter = `blur(${Math.max(0, blurAmount)}px) saturate(${Math.max(0, backgroundSaturation)}%) brightness(70%)`;

    const imgAspectRatio = originalImg.width / originalImg.height;
    const canvasAspectRatio = canvasWidth / canvasHeight;
    let sWidth = originalImg.width;
    let sHeight = originalImg.height;
    let sx = 0;
    let sy = 0;

    // Calculate cropping dimensions to make the image fill the canvas without distortion.
    if (imgAspectRatio > canvasAspectRatio) {
        // Image is wider than canvas, so we crop the sides.
        sHeight = originalImg.height;
        sWidth = sHeight * canvasAspectRatio;
        sx = (originalImg.width - sWidth) / 2;
    } else {
        // Image is taller than canvas, so we crop the top and bottom.
        sWidth = originalImg.width;
        sHeight = sWidth / canvasAspectRatio;
        sy = (originalImg.height - sHeight) / 2;
    }
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, canvasWidth, canvasHeight);
    
    // Reset the filter for subsequent drawings.
    ctx.filter = 'none';

    // 4. Draw the small, original image on top to represent the "small" subject.
    const maxSmallDim = canvasHeight * Math.max(0.05, Math.min(1, scale)); // Clamp scale
    let smallWidth, smallHeight;
    if (imgAspectRatio > 1) { // Landscape
        smallWidth = maxSmallDim;
        smallHeight = maxSmallDim / imgAspectRatio;
    } else { // Portrait or square
        smallHeight = maxSmallDim;
        smallWidth = maxSmallDim * imgAspectRatio;
    }

    // Position the small image at the bottom center to emphasize its smallness.
    const paddingBottom = canvasHeight * 0.1;
    const smallImgX = (canvasWidth - smallWidth) / 2;
    const smallImgY = canvasHeight - smallHeight - paddingBottom;
    
    // Add a subtle drop shadow to lift the small image from the background.
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 10;

    ctx.drawImage(originalImg, smallImgX, smallImgY, smallWidth, smallHeight);
    
    // Reset the shadow.
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;

    // 5. Add the poignant text below the small image.
    if (text && text.trim().length > 0) {
        const fontSize = canvasHeight * 0.04;
        ctx.font = `italic ${fontSize}px Lora, serif`;
        ctx.fillStyle = textColor;
        ctx.textAlign = 'center';

        const textY = smallImgY + smallHeight + (paddingBottom / 1.8);
        ctx.fillText(text, canvasWidth / 2, textY, canvasWidth * 0.9);
    }
    
    // 6. Return the final canvas element.
    return canvas;
}