Image Rescue Rescuers Assistant Tool

function processImage(originalImg, text = "КАК СПАСАТЬ СПАСАТЕЛЕЙ", themeColor = "#e74c3c", addLifebuoy = 1) {
    // Create a new canvas to process the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Add a slight dark tint for dramatic "rescue" effect so overlays pop out
    ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const minDim = Math.min(canvas.width, canvas.height);
    
    // Draw a First Aid / Medical Rescue Box at the top right
    const crossBoxSize = minDim * 0.12;
    const margin = minDim * 0.05;
    const rightX = canvas.width - crossBoxSize - margin;
    const topY = margin;

    // White background for the cross
    ctx.shadowColor = "rgba(0,0,0,0.5)";
    ctx.shadowBlur = 10;
    ctx.fillStyle = "#ffffff";
    ctx.beginPath();
    ctx.roundRect ? ctx.roundRect(rightX, topY, crossBoxSize, crossBoxSize, 8) : ctx.fillRect(rightX, topY, crossBoxSize, crossBoxSize);
    ctx.fill();
    ctx.shadowBlur = 0; // Reset shadow

    // Cross geometry
    ctx.fillStyle = themeColor;
    const thickness = crossBoxSize * 0.3;
    const length = crossBoxSize * 0.7;
    const cxBox = rightX + crossBoxSize / 2;
    const cyBox = topY + crossBoxSize / 2;

    ctx.fillRect(cxBox - length / 2, cyBox - thickness / 2, length, thickness);
    ctx.fillRect(cxBox - thickness / 2, cyBox - length / 2, thickness, length);

    // Draw Lifebuoy overlay if enabled (addLifebuoy === 1)
    if (addLifebuoy === 1) {
        const cx = canvas.width / 2;
        const cy = canvas.height / 2;
        const R = minDim / 2 * 0.75; // Outer radius
        const r = minDim / 2 * 0.45; // Inner radius

        // Outer shadow for the lifebuoy
        ctx.shadowColor = "rgba(0,0,0,0.6)";
        ctx.shadowBlur = 20;

        // Draw the main white ring
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, Math.PI * 2);
        ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
        ctx.fillStyle = "#f5f5f5";
        ctx.fill();

        ctx.shadowBlur = 0;

        // Draw the repeating colored bands
        ctx.fillStyle = themeColor;
        for (let i = 0; i < 4; i++) {
            ctx.beginPath();
            // Each band spans 45 degrees
            const startAngle = i * Math.PI / 2 - Math.PI / 8;
            const endAngle = i * Math.PI / 2 + Math.PI / 8;
            ctx.arc(cx, cy, R, startAngle, endAngle, false);
            ctx.arc(cx, cy, r, endAngle, startAngle, true);
            ctx.fill();
        }

        // Draw the safety ropes
        const ropeColor = "#dcdde1";
        const ropeRadius = R * 1.15;
        
        ctx.strokeStyle = ropeColor;
        ctx.lineWidth = R * 0.03;
        ctx.beginPath();
        ctx.arc(cx, cy, ropeRadius, 0, Math.PI * 2);
        ctx.stroke();

        // Connect safety rope to lifebuoy shell
        ctx.lineWidth = R * 0.04;
        ctx.strokeStyle = "#ffffff";
        for (let i = 0; i < 4; i++) {
            const angle = i * Math.PI / 2 + Math.PI / 4;
            const innerX = cx + Math.cos(angle) * R * 0.95;
            const innerY = cy + Math.sin(angle) * R * 0.95;
            const outerX = cx + Math.cos(angle) * ropeRadius;
            const outerY = cy + Math.sin(angle) * ropeRadius;
            
            ctx.beginPath();
            ctx.moveTo(innerX, innerY);
            ctx.lineTo(outerX, outerY);
            ctx.stroke();
        }
    }

    // Add overlay text
    if (text) {
        let fontSize = Math.max(24, canvas.width / 16);
        ctx.font = `900 ${fontSize}px "Arial Black", Arial, sans-serif`;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        
        const textY = canvas.height * 0.9 - margin;
        
        ctx.lineWidth = Math.max(4, fontSize * 0.15);
        ctx.strokeStyle = "#000000";
        ctx.strokeText(text, canvas.width / 2, textY);
        
        ctx.fillStyle = "#ffffff";
        ctx.fillText(text, canvas.width / 2, textY);
    }

    return canvas;
}