Image History Viewer

function processImage(originalImg, title = "История Бублика", maxWidth = 400) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const maxW = parseInt(maxWidth) || 400;
    let scale = 1;
    if (originalImg.width > maxW) {
        scale = maxW / originalImg.width;
    }
    const w = originalImg.width * scale;
    const h = originalImg.height * scale;

    const frameCount = 3;
    const gap = 20;
    const padding = 20;
    const topMargin = 70;
    const bottomMargin = 50;
    
    canvas.width = (w * frameCount) + (gap * (frameCount - 1)) + (padding * 2);
    canvas.height = h + topMargin + bottomMargin;

    // Draw background (dark gray film-strip look)
    ctx.fillStyle = '#1a1a1a';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw title
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 30px Arial, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(title, canvas.width / 2, 35);

    ctx.font = '16px Arial, sans-serif';

    const filters = ['grayscale(100%) contrast(120%)', 'sepia(80%) contrast(110%)', 'none'];
    const labels = ['1900s (Black & White)', '1970s (Sepia)', 'Present (Original)'];

    for (let i = 0; i < frameCount; i++) {
        const x = padding + i * (w + gap);
        const y = topMargin;

        // Draw image frame
        ctx.fillStyle = '#000000';
        ctx.fillRect(x - 5, y - 5, w + 10, h + 10);

        ctx.save();
        ctx.filter = filters[i];
        ctx.drawImage(originalImg, x, y, w, h);
        
        // Add artificial film grain/noise for the historical filters
        if (i === 0 || i === 1) { 
            const imgData = ctx.getImageData(x, y, w, h);
            const data = imgData.data;
            const noiseIntensity = i === 0 ? 50 : 30;
            for(let k = 0; k < data.length; k += 4) {
                const noise = (Math.random() - 0.5) * noiseIntensity;
                // Add noise differently based on whether it is grayscale or sepia to maintain tint
                data[k] = Math.min(255, Math.max(0, data[k] + noise));
                data[k+1] = Math.min(255, Math.max(0, data[k+1] + noise * (i === 0 ? 1 : 0.8)));
                data[k+2] = Math.min(255, Math.max(0, data[k+2] + noise * (i === 0 ? 1 : 0.5)));
            }
            ctx.putImageData(imgData, x, y);
        }

        ctx.restore();

        // Draw label below each frame
        ctx.fillStyle = '#dddddd';
        ctx.fillText(labels[i], x + w / 2, y + h + 25);
    }

    return canvas;
}