Erar Wing Photo Viewer

function processImage(originalImg, frameColor = "#1a1a1a", wallColor = "#eae5d9", captionText = "Флигель Эрара") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Scale down image if it's too large to prevent canvas performance issues
    let scale = 1;
    const MAX_DIM = 1200;
    if (originalImg.width > MAX_DIM || originalImg.height > MAX_DIM) {
        scale = Math.min(MAX_DIM / originalImg.width, MAX_DIM / originalImg.height);
    }
    
    const imgWidth = originalImg.width * scale;
    const imgHeight = originalImg.height * scale;
    
    // Layout and dimensions sizing relative to the image
    const maxDim = Math.max(imgWidth, imgHeight);
    const matSize = maxDim * 0.08;        // Passepartout (white border) size
    const frameSize = maxDim * 0.04;      // Frame thickness
    const wallPadX = maxDim * 0.15;       // Side wall space
    const wallPadY = maxDim * 0.15;       // Top wall space
    const wallPadBottom = maxDim * 0.25;  // Bottom wall space (for plaque)
    
    const frameW = imgWidth + (2 * matSize) + (2 * frameSize);
    const frameH = imgHeight + (2 * matSize) + (2 * frameSize);
    
    const frameX = wallPadX;
    const frameY = wallPadY;
    
    const matX = frameX + frameSize;
    const matY = frameY + frameSize;
    const matW = imgWidth + (2 * matSize);
    const matH = imgHeight + (2 * matSize);
    
    const imgX = matX + matSize;
    const imgY = matY + matSize;
    
    canvas.width = frameW + (2 * wallPadX);
    canvas.height = frameH + wallPadY + wallPadBottom;
    
    // 1. Draw Gallery Wall with a "Spotlight" effect
    ctx.fillStyle = wallColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    const cx = canvas.width / 2;
    const cy = canvas.height * 0.4;
    const r = Math.max(canvas.width, canvas.height);
    const spotlight = ctx.createRadialGradient(cx, cy, r * 0.1, cx, cy, r * 0.7);
    spotlight.addColorStop(0, 'rgba(0, 0, 0, 0)');
    spotlight.addColorStop(1, 'rgba(0, 0, 0, 0.15)'); // darken edges
    ctx.fillStyle = spotlight;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 2. Draw Outer Frame with drop shadow
    ctx.shadowColor = 'rgba(0, 0, 0, 0.55)';
    ctx.shadowBlur = maxDim * 0.03;
    ctx.shadowOffsetX = maxDim * 0.01;
    ctx.shadowOffsetY = maxDim * 0.015;
    
    ctx.fillStyle = frameColor;
    ctx.fillRect(frameX, frameY, frameW, frameH);
    
    // Add wood/metallic frame bevel effect
    ctx.shadowColor = 'transparent';
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
    ctx.lineWidth = Math.max(2, frameSize * 0.1);
    ctx.strokeRect(frameX + ctx.lineWidth, frameY + ctx.lineWidth, frameW - ctx.lineWidth*2, frameH - ctx.lineWidth*2);
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.strokeRect(frameX, frameY, frameW, frameH);
    
    // 3. Draw Passepartout (Matting)
    ctx.fillStyle = '#fdfcf9'; // Off-white textured look
    ctx.fillRect(matX, matY, matW, matH);
    
    // Inner shadow of the passepartout
    ctx.strokeStyle = '#e6e4df';
    ctx.lineWidth = 2;
    ctx.strokeRect(matX, matY, matW, matH);
    
    // 4. Draw the Original Image
    // We add an inner shadow cast by the matting onto the image
    ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
    ctx.shadowBlur = Math.max(5, maxDim * 0.008);
    ctx.shadowOffsetX = Math.max(2, maxDim * 0.003);
    ctx.shadowOffsetY = Math.max(2, maxDim * 0.003);
    
    ctx.drawImage(originalImg, imgX, imgY, imgWidth, imgHeight);
    
    // Reset shadow
    ctx.shadowColor = 'transparent';
    
    // 5. Draw Museum Plaque
    const plaqueW = Math.min(frameW * 0.4, maxDim * 0.5);
    const plaqueH = maxDim * 0.06;
    const plaqueX = (canvas.width / 2) - (plaqueW / 2);
    const plaqueY = frameY + frameH + (wallPadBottom * 0.3);
    
    // Plaque shadow
    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    ctx.shadowBlur = 8;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    
    // Plaque background (Brushed metal/silver look)
    const plaqueGrad = ctx.createLinearGradient(plaqueX, plaqueY, plaqueX, plaqueY + plaqueH);
    plaqueGrad.addColorStop(0, '#fbfbfb');
    plaqueGrad.addColorStop(1, '#d3d3d3');
    ctx.fillStyle = plaqueGrad;
    ctx.fillRect(plaqueX, plaqueY, plaqueW, plaqueH);
    
    ctx.shadowColor = 'transparent';
    
    // Plaque border
    ctx.strokeStyle = '#aaaaaa';
    ctx.lineWidth = 2;
    ctx.strokeRect(plaqueX, plaqueY, plaqueW, plaqueH);
    
    // 6. Draw Plaque Text
    const fontSize = Math.max(12, plaqueH * 0.35);
    ctx.font = `italic ${fontSize}px "Georgia", serif`;
    ctx.fillStyle = '#222222';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Ensure text fits inside the plaque
    ctx.fillText(
        captionText, 
        plaqueX + plaqueW / 2, 
        plaqueY + plaqueH / 2, 
        plaqueW * 0.9 // Max width
    );
    
    return canvas;
}