Girl Image Viewer

function processImage(originalImg, frameColor = "#FFC0CB", frameWidth = 20, caption = "Девушка", glowIntensity = 8) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Parse numeric parameters to ensure valid calculations
    const parsedFrameWidth = parseInt(frameWidth) || 0;
    const parsedGlow = parseInt(glowIntensity) || 0;
    
    // Add extra space at the bottom if a caption is provided
    const bottomHeight = caption.trim() !== "" ? 70 : 0;

    // Set canvas dimensions
    canvas.width = originalImg.width + (parsedFrameWidth * 2);
    canvas.height = originalImg.height + (parsedFrameWidth * 2) + bottomHeight;

    // 1. Draw the background / frame
    ctx.fillStyle = frameColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw a white inner border for a photo-like aesthetic
    ctx.fillStyle = "#ffffff";
    const whiteBorderWidth = Math.max(2, Math.floor(parsedFrameWidth / 5));
    ctx.fillRect(
        parsedFrameWidth - whiteBorderWidth, 
        parsedFrameWidth - whiteBorderWidth, 
        originalImg.width + (whiteBorderWidth * 2), 
        originalImg.height + (whiteBorderWidth * 2)
    );

    // 3. Draw the original image
    ctx.drawImage(originalImg, parsedFrameWidth, parsedFrameWidth, originalImg.width, originalImg.height);

    // 4. Apply a "glamour/beauty filter" overlay effect (softened blur with boosted brightness)
    if (parsedGlow > 0) {
        ctx.save();
        ctx.globalCompositeOperation = "screen";
        ctx.globalAlpha = 0.25;
        ctx.filter = `blur(${parsedGlow}px) brightness(1.1)`;
        ctx.drawImage(originalImg, parsedFrameWidth, parsedFrameWidth, originalImg.width, originalImg.height);
        ctx.restore();
    }

    // 5. Draw the caption text at the bottom
    if (bottomHeight > 0) {
        ctx.save();
        ctx.fillStyle = "#ffffff";
        
        // Add a soft drop shadow to make the text readable against the frame
        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
        ctx.shadowBlur = 4;
        ctx.shadowOffsetX = 1;
        ctx.shadowOffsetY = 1;

        // Elegant, web-safe serif font
        ctx.font = "italic 36px Georgia, 'Times New Roman', serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        const textX = canvas.width / 2;
        const textY = canvas.height - (bottomHeight / 2);
        
        ctx.fillText(caption, textX, textY);
        ctx.restore();
    }

    return canvas;
}