Image Bouquet And Calm Theme Creator

function processImage(originalImg, text = "Нам пятёрка!", calmTint = "rgba(220, 235, 240, 0.15)", bouquetEmojis = "💐,🌸,🌷,🌿,🌼", basePadding = 60) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate a scale factor based on the original image to keep proportions lovely
    const scale = Math.max(1, originalImg.width / 800, originalImg.height / 800);
    const pad = Number(basePadding) * scale;
    const bottomPad = pad + (100 * scale); // Extra space at bottom for text and bouquets

    canvas.width = originalImg.width + pad * 2;
    canvas.height = originalImg.height + pad + bottomPad;

    // 1. Draw a Calming gradient background (soft pastel colors)
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, '#fdfbfb'); // Cloud white
    gradient.addColorStop(0.5, '#e2ebf0'); // Calm soft blueish/gray
    gradient.addColorStop(1, '#f3e7e9'); // Faint warm pastel pink at the bottom
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw the Image with a soft layout and shadow
    ctx.save();
    // Drop shadow for depth and soft grounding
    ctx.shadowColor = 'rgba(110, 120, 130, 0.3)';
    ctx.shadowBlur = 30 * scale;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 15 * scale;
    
    // Calm Filter: lower contrast slightly, add gentle brightness and warm tone
    if (typeof ctx.filter !== 'undefined') {
        ctx.filter = 'contrast(0.9) brightness(1.05) saturate(0.85) sepia(0.15)';
    }
    
    // Draw original image inside the "frame"
    const imgX = pad;
    const imgY = pad;
    ctx.drawImage(originalImg, imgX, imgY, originalImg.width, originalImg.height);
    ctx.restore();

    // 3. Apply soft overlapping overlay over the photo for absolute calmness
    ctx.fillStyle = calmTint;
    ctx.fillRect(imgX, imgY, originalImg.width, originalImg.height);

    // 4. Decoration: The Bouquet Theme
    const emojis = bouquetEmojis.split(',').map(e => e.trim());
    const getEmoji = (idx) => emojis[idx % emojis.length] || "🌸";
    
    const drawEmoji = (str, x, y, size) => {
        ctx.font = `${size}px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(str, x, y);
    };

    const cornerSize = pad * 1.2;
    // Draw floral arrangements at the corners of the frame
    drawEmoji(getEmoji(0), pad / 2, pad / 2, cornerSize); // Top-left
    drawEmoji(getEmoji(1), canvas.width - pad / 2, pad / 2, cornerSize); // Top-right
    drawEmoji(getEmoji(2), pad / 2, imgY + originalImg.height + pad / 2, cornerSize); // Bottom-left corner of image
    drawEmoji(getEmoji(3), canvas.width - pad / 2, imgY + originalImg.height + pad / 2, cornerSize); // Bottom-right corner of image

    // 5. Draw the uplifting/calm text at the bottom panel
    const textFontSize = 55 * scale;
    ctx.font = `italic ${textFontSize}px "Georgia", "Times New Roman", serif`;
    ctx.fillStyle = '#4a5568'; // Soft slate / dark grayish blue
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    const textY = canvas.height - (bottomPad / 2) + (10 * scale);
    ctx.fillText(text, canvas.width / 2, textY);

    // Surrounding bouquet decorations for the text ("Букет")
    const textMetrics = ctx.measureText(text);
    const textWidth = textMetrics.width;
    const decorSize = textFontSize * 0.9;
    
    drawEmoji(getEmoji(4), canvas.width / 2 - (textWidth / 2) - (decorSize * 1.2), textY, decorSize);
    drawEmoji(getEmoji(0), canvas.width / 2 + (textWidth / 2) + (decorSize * 1.2), textY, decorSize);

    return canvas;
}