Photo Request Processing Tool

function processImage(
    originalImg,
    textRu = "ОБРАБОТКА ФОТО ЗАПРОСА",
    textEn = "PROCESSING YOUR REQUEST...",
    themeColor = "#00FF41",
    progressPercent = 75
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size to match original image
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    
    // Draw the original image as base
    ctx.drawImage(originalImg, 0, 0);
    
    // Add a dark semi-transparent overlay to emulate a screen and make text readable
    ctx.fillStyle = 'rgba(0, 0, 0, 0.65)';
    ctx.fillRect(0, 0, width, height);
    
    // Add scanlines for a "processing" / digital HUD effect
    ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
    for (let y = 0; y < height; y += 4) {
        ctx.fillRect(0, y, width, 2);
    }
    
    // Calculate dynamic sizes based on image dimensions
    const minDim = Math.min(width, height);
    const padding = minDim * 0.05;
    const cornerSize = minDim * 0.1;
    
    // Configure drawing styles
    ctx.strokeStyle = themeColor;
    ctx.lineWidth = Math.max(2, minDim * 0.005);
    ctx.lineJoin = 'miter';
    
    // Draw HUD Corner Brackets
    ctx.beginPath();
    // Top Left
    ctx.moveTo(padding, padding + cornerSize);
    ctx.lineTo(padding, padding);
    ctx.lineTo(padding + cornerSize, padding);
    // Top Right
    ctx.moveTo(width - padding - cornerSize, padding);
    ctx.lineTo(width - padding, padding);
    ctx.lineTo(width - padding, padding + cornerSize);
    // Bottom Right
    ctx.moveTo(width - padding, height - padding - cornerSize);
    ctx.lineTo(width - padding, height - padding);
    ctx.lineTo(width - padding - cornerSize, height - padding);
    // Bottom Left
    ctx.moveTo(padding + cornerSize, height - padding);
    ctx.lineTo(padding, height - padding);
    ctx.lineTo(padding, height - padding - cornerSize);
    ctx.stroke();
    
    // Configure text sizing
    const fontSizeRu = Math.max(16, Math.floor(minDim * 0.04));
    const fontSizeEn = Math.max(14, Math.floor(minDim * 0.035));
    
    // Measure texts to center and size the box dynamically
    ctx.font = `bold ${fontSizeRu}px "Courier New", Courier, monospace`;
    const textWidthRu = ctx.measureText(textRu).width;
    
    ctx.font = `${fontSizeEn}px "Courier New", Courier, monospace`;
    const textWidthEn = ctx.measureText(textEn).width;
    
    const maxTextWidth = Math.max(textWidthRu, textWidthEn);
    const boxWidth = maxTextWidth + padding * 4;
    const boxHeight = fontSizeRu + fontSizeEn + Math.max(8, minDim * 0.015) + padding * 3.5;
    
    const boxX = (width - boxWidth) / 2;
    const boxY = (height - boxHeight) / 2;
    
    // Draw Center Pop-up Box
    ctx.fillStyle = 'rgba(0, 10, 0, 0.85)';
    ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
    ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);
    
    // Draw Texts
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillStyle = themeColor;
    
    // Russian Text (Title)
    ctx.font = `bold ${fontSizeRu}px "Courier New", Courier, monospace`;
    ctx.fillText(textRu, width / 2, boxY + padding);
    
    // English Text (Subtitle)
    ctx.font = `${fontSizeEn}px "Courier New", Courier, monospace`;
    ctx.fillText(textEn, width / 2, boxY + padding + fontSizeRu + padding * 0.5);
    
    // Draw Progress Bar
    const barWidth = maxTextWidth;
    const barHeight = Math.max(8, minDim * 0.015);
    const barX = (width - barWidth) / 2;
    const barY = boxY + padding * 1.5 + fontSizeRu + fontSizeEn;
    
    ctx.strokeRect(barX, barY, barWidth, barHeight);
    
    // Fill Progress Bar Activity
    const innerPadding = Math.max(1, Math.floor(barHeight * 0.2));
    const pct = Math.min(100, Math.max(0, Number(progressPercent))) / 100;
    const activeBarWidth = (barWidth - innerPadding * 2) * pct;
    
    if (activeBarWidth > 0) {
        ctx.fillRect(barX + innerPadding, barY + innerPadding, activeBarWidth, barHeight - innerPadding * 2);
    }
    
    return canvas;
}