Studio Drugikh Project Image Database

function processImage(originalImg, title = "База данных Студии Других Проект", recordId = "ID-001: UNKNOWN", classification = "CLASSIFIED", themeColor = "#18FF00", showScanlines = 1) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    // Define layout dimensions
    const padding = 20;
    const headerHeight = 70;
    const footerHeight = 60;
    const minWidth = 650;
    
    // Calculate total canvas size
    const canvasWidth = Math.max(originalImg.width + padding * 2, minWidth);
    const canvasHeight = originalImg.height + headerHeight + footerHeight;
    
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    // 1. Draw solid dark background
    ctx.fillStyle = "#0a0a0a";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
    
    // 2. Draw outer boundary frame
    ctx.strokeStyle = themeColor;
    ctx.lineWidth = 2;
    ctx.strokeRect(10, 10, canvasWidth - 20, canvasHeight - 20);
    
    ctx.beginPath();
    ctx.moveTo(10, 50);
    ctx.lineTo(canvasWidth - 10, 50);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(10, canvasHeight - 50);
    ctx.lineTo(canvasWidth - 10, canvasHeight - 50);
    ctx.stroke();
    
    // 3. Draw Header Title
    ctx.fillStyle = themeColor;
    ctx.font = "bold 22px monospace";
    ctx.textBaseline = "middle";
    ctx.fillText(title, padding, 30);
    
    // 4. Draw the original image centered
    const imgX = (canvasWidth - originalImg.width) / 2;
    const imgY = headerHeight;
    ctx.drawImage(originalImg, imgX, imgY);
    
    // Draw an inner frame around the image specifically
    ctx.strokeRect(imgX - 2, imgY - 2, originalImg.width + 4, originalImg.height + 4);
    
    // 5. Draw Footer Information
    ctx.font = "16px monospace";
    ctx.fillText(recordId, padding, canvasHeight - 25);
    
    // Output a generated date
    const dateStr = `DATE: ` + new Date().toISOString().split("T")[0];
    const dateWidth = ctx.measureText(dateStr).width;
    ctx.fillText(dateStr, canvasWidth / 2 - dateWidth / 2, canvasHeight - 25);
    
    // Output classification status
    const classWidth = ctx.measureText(classification).width;
    ctx.fillText(`STATUS: ${classification}`, canvasWidth - padding - classWidth - 70, canvasHeight - 25);
    
    // 6. Apply CRT Scanline effect (if enabled)
    if (parseInt(showScanlines) !== 0) {
        ctx.fillStyle = "rgba(0, 0, 0, 0.35)";
        for (let y = 0; y < canvasHeight; y += 3) {
            ctx.fillRect(0, y, canvasWidth, 1);
        }
        
        // Add a slight green/theme tint over the whole result to unify the UI look
        ctx.fillStyle = themeColor;
        ctx.globalAlpha = 0.05;
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        ctx.globalAlpha = 1.0;
    }
    
    return canvas;
}