Новый Визирь Image Tool

function processImage(originalImg, overlayColor = "#ffffff", hudText = "REC", showGrid = "true") {
    // "Визирь" translates to viewfinder, sight, or reticle. 
    // This function creates a "New Vizier" (Camera HUD / Viewfinder Reticle) overlay onto the image.
    
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    
    // Draw original image
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Calculate dynamic overlay sizes based on the image dimensions
    const minDim = Math.min(width, height);
    const lineWidth = Math.max(1, minDim * 0.005);
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = overlayColor;
    ctx.fillStyle = overlayColor;

    const margin = minDim * 0.05;
    const bracketLen = minDim * 0.1;

    // 1. Draw Corner Brackets (Viewfinder Edges)
    ctx.beginPath();
    // Top-Left
    ctx.moveTo(margin, margin + bracketLen);
    ctx.lineTo(margin, margin);
    ctx.lineTo(margin + bracketLen, margin);

    // Top-Right
    ctx.moveTo(width - margin - bracketLen, margin);
    ctx.lineTo(width - margin, margin);
    ctx.lineTo(width - margin, margin + bracketLen);

    // Bottom-Right
    ctx.moveTo(width - margin, height - margin - bracketLen);
    ctx.lineTo(width - margin, height - margin);
    ctx.lineTo(width - margin - bracketLen, height - margin);

    // Bottom-Left
    ctx.moveTo(margin + bracketLen, height - margin);
    ctx.lineTo(margin, height - margin);
    ctx.lineTo(margin, height - margin - bracketLen);
    ctx.stroke();

    // 2. Draw Center Crosshair (The "Vizir" / Reticle)
    const cx = width / 2;
    const cy = height / 2;
    const gap = minDim * 0.02;
    const crossLen = minDim * 0.05;

    ctx.beginPath();
    // Inner center dot/circle
    ctx.arc(cx, cy, gap * 0.3, 0, Math.PI * 2);
    ctx.stroke();

    ctx.beginPath();
    // Left line
    ctx.moveTo(cx - gap - crossLen, cy);
    ctx.lineTo(cx - gap, cy);
    // Right line
    ctx.moveTo(cx + gap, cy);
    ctx.lineTo(cx + gap + crossLen, cy);
    // Top line
    ctx.moveTo(cx, cy - gap - crossLen);
    ctx.lineTo(cx, cy - gap);
    // Bottom line
    ctx.moveTo(cx, cy + gap);
    ctx.lineTo(cx, cy + gap + crossLen);
    ctx.stroke();

    // 3. Draw Rule of Thirds Grid (Optional)
    if (String(showGrid).toLowerCase() === "true") {
        ctx.globalAlpha = 0.3; // Semi-transparent for the grid
        ctx.beginPath();
        // Vertical lines
        ctx.moveTo(width / 3, 0);
        ctx.lineTo(width / 3, height);
        ctx.moveTo(2 * width / 3, 0);
        ctx.lineTo(2 * width / 3, height);
        // Horizontal lines
        ctx.moveTo(0, height / 3);
        ctx.lineTo(width, height / 3);
        ctx.moveTo(0, 2 * height / 3);
        ctx.lineTo(width, 2 * height / 3);
        ctx.stroke();
        ctx.globalAlpha = 1.0; // Reset alpha
    }

    // 4. Draw HUD Text (Head-Up Display)
    const fontSize = Math.max(12, minDim * 0.04);
    ctx.font = `bold ${fontSize}px "Courier New", monospace`;
    ctx.textBaseline = 'middle';

    // HUD: Recording Indicator
    if (hudText && hudText.trim() !== "") {
        const textY = margin + bracketLen + (fontSize * 1.5);
        
        // Red recording dot
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(margin + fontSize / 2, textY, fontSize / 3, 0, 2 * Math.PI);
        ctx.fill();

        // Text
        ctx.fillStyle = overlayColor;
        ctx.textAlign = 'left';
        ctx.fillText(hudText.toUpperCase(), margin + fontSize * 1.5, textY);
    }

    // HUD: Mock Camera Data (Bottom Right)
    ctx.fillStyle = overlayColor;
    ctx.textAlign = 'right';
    const cameraSettings = "F2.8 | 1/1000 | ISO 400";
    ctx.fillText(cameraSettings, width - margin, height - margin - bracketLen - (fontSize * 0.5));

    // HUD: Battery Outline (Top Right)
    const batW = fontSize * 2;
    const batH = fontSize;
    const batX = width - margin - batW;
    const batY = margin + bracketLen + fontSize;
    
    ctx.lineWidth = lineWidth * 0.8;
    ctx.strokeRect(batX, batY, batW, batH);
    ctx.fillRect(batX + (lineWidth*0.4), batY + (lineWidth*0.4), batW * 0.7, batH - (lineWidth*0.8)); // Battery level
    ctx.fillRect(batX + batW, batY + batH * 0.25, batW * 0.1, batH * 0.5); // Battery tip

    return canvas;
}