Atlantis Case Image Viewer

function processImage(originalImg, stampText = "СЕКРЕТНО", titleText = "ДЕЛО ОБ АТЛАНТИДЕ") {
    // Determine dimensions to avoid overly massive canvases
    const MAX_DIM = 800;
    let scale = 1;
    if (originalImg.width > MAX_DIM || originalImg.height > MAX_DIM) {
        scale = Math.min(MAX_DIM / originalImg.width, MAX_DIM / originalImg.height);
    }
    const imgW = originalImg.width * scale;
    const imgH = originalImg.height * scale;
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const paddingX = Math.max(150, imgW * 0.2);
    const paddingY = Math.max(250, imgH * 0.3);
    
    canvas.width = imgW + paddingX * 2;
    canvas.height = imgH + paddingY;
    
    // 1. Dossier (Manila Folder) Background
    ctx.fillStyle = '#eaddb8'; // Vintage folder color
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Add subtle paper texture noise
    ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
    for(let i = 0; i < canvas.width; i += 3) {
        for(let j = 0; j < canvas.height; j += 3) {
            if(Math.random() > 0.6) {
                ctx.fillRect(i, j, 2, 2);
            }
        }
    }
    
    // Darker reinforced spine on the left
    const spineWidth = Math.max(50, canvas.width * 0.05);
    ctx.fillStyle = '#cca972';
    ctx.fillRect(0, 0, spineWidth, canvas.height);
    
    // Draw binder staple strings/rings
    ctx.fillStyle = '#aaa';
    ctx.strokeStyle = '#444';
    ctx.lineWidth = 2;
    for (let i = 1; i <= 3; i++) {
        let ringY = (canvas.height / 4) * i;
        ctx.beginPath();
        ctx.arc(spineWidth / 2, ringY, 8, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
        
        // Ring shadows
        ctx.beginPath();
        ctx.moveTo(spineWidth / 2 + 8, ringY);
        ctx.lineTo(spineWidth / 2 + 25, ringY + 10);
        ctx.strokeStyle = 'rgba(0,0,0,0.2)';
        ctx.lineWidth = 4;
        ctx.stroke();
    }
    
    // 2. Titles & Archival Text
    ctx.fillStyle = '#222';
    ctx.font = 'bold 42px "Courier New", Courier, monospace';
    ctx.textAlign = 'center';
    ctx.fillText(titleText, canvas.width / 2, 80);
    
    ctx.font = '18px "Courier New", Courier, monospace';
    ctx.fillText("Top Secret Archive - Reference #ATL-9942", canvas.width / 2, 120);
    
    // Background classification text
    ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
    ctx.font = '14px "Courier New", Courier, monospace';
    ctx.fillText("COORDINATES: Lat: 31° 15' N  Long: 24° 10' W", canvas.width / 2, canvas.height - 30);
    ctx.textAlign = 'right';
    ctx.fillText("CLEARANCE LEVEL: OMEGA", canvas.width - 20, canvas.height - 30);

    // 3. Draw The Photo (Original Image glued as a polaroid/print)
    ctx.save();
    // Move to center area for photo
    ctx.translate(canvas.width / 2 + (spineWidth / 2), canvas.height / 2 + 50);
    
    // Random slight rotation for the photo
    const angle = (Math.random() - 0.5) * 5 * Math.PI / 180; // +/- 2.5 degrees
    ctx.rotate(angle);
    
    // Draw Photo border
    const border = 15;
    const bottomBorder = 45;
    
    // Add shadow
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    
    // White photo paper
    ctx.fillStyle = '#Fdfdfd';
    ctx.fillRect(-imgW / 2 - border, -imgH / 2 - border, imgW + border * 2, imgH + border + bottomBorder);
    
    // Draw the actual image
    ctx.shadowColor = 'transparent';
    ctx.drawImage(originalImg, -imgW / 2, -imgH / 2, imgW, imgH);
    
    // Add some tape to make it look attached to the dossier
    ctx.save();
    ctx.translate(-imgW / 2, -imgH / 2 - border);
    ctx.rotate(-10 * Math.PI / 180);
    ctx.fillStyle = 'rgba(230, 230, 230, 0.6)'; // Tape color
    ctx.fillRect(-20, -10, 60, 25);
    ctx.strokeStyle = 'rgba(200, 200, 200, 0.4)';
    ctx.strokeRect(-20, -10, 60, 25);
    ctx.restore();
    
    ctx.restore();
    
    // 4. Draw Red Stamp (СЕКРЕТНО)
    ctx.save();
    ctx.translate(canvas.width - 160, 110);
    ctx.rotate(-15 * Math.PI / 180);
    
    ctx.strokeStyle = '#c62828';
    ctx.lineWidth = 5;
    ctx.strokeRect(-100, -30, 200, 60);
    
    ctx.fillStyle = '#c62828';
    ctx.font = 'bold 32px "Courier New", Courier, monospace';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(stampText, 0, 0);
    
    // Apply distress/noise to the stamp to make it look stamped in ink
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0,0,0,0.8)';
    for(let i = 0; i < 200; i++) {
        let nX = -100 + Math.random() * 200;
        let nY = -30 + Math.random() * 60;
        ctx.fillRect(nX, nY, Math.random() * 3, Math.random() * 3);
    }
    ctx.restore();

    return canvas;
}