Earth Rescue Image Creator

function processImage(originalImg, text = "Спасение Земли", overlayIntensity = "0.4", ecoFilter = "1") {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

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

    // Apply Eco-friendly Overlay and Vignette if ecoFilter is enabled
    if (ecoFilter === "1" || ecoFilter === 1) {
        // Greenish nature tint
        const intensity = parseFloat(overlayIntensity);
        ctx.fillStyle = `rgba(34, 139, 34, ${intensity})`; // ForestGreen
        ctx.fillRect(0, 0, width, height);

        // Dark vignette around edges to focus on center parts
        const gradient = ctx.createRadialGradient(
            width / 2, height / 2, 0, 
            width / 2, height / 2, Math.max(width, height) / 1.5
        );
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, 'rgba(0,0,0,0.8)');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, width, height);
    }

    // Coordinates and sizes for the Earth badge
    const earthRadius = Math.min(width, height) * 0.15;
    const centerX = width / 2;
    const centerY = height - earthRadius - Math.min(width, height) * 0.05;

    // Draw Earth globe (Blue Ocean)
    ctx.beginPath();
    ctx.arc(centerX, centerY, earthRadius, 0, Math.PI * 2);
    ctx.fillStyle = '#1E90FF'; // DodgerBlue
    ctx.fill();
    ctx.lineWidth = Math.max(2, earthRadius * 0.05);
    ctx.strokeStyle = '#FFFFFF';
    ctx.stroke();

    // Draw Earth continents (Green Landmasses)
    ctx.save();
    ctx.beginPath();
    ctx.arc(centerX, centerY, earthRadius, 0, Math.PI * 2);
    ctx.clip(); // Clip everything outside the circle

    ctx.fillStyle = '#32CD32'; // LimeGreen
    ctx.beginPath();
    // Abstract shapes representing continents
    ctx.arc(centerX - earthRadius * 0.3, centerY - earthRadius * 0.2, earthRadius * 0.5, 0, Math.PI * 2);
    ctx.arc(centerX + earthRadius * 0.4, centerY - earthRadius * 0.4, earthRadius * 0.4, 0, Math.PI * 2);
    ctx.arc(centerX + earthRadius * 0.1, centerY + earthRadius * 0.3, earthRadius * 0.6, 0, Math.PI * 2);
    ctx.arc(centerX - earthRadius * 0.5, centerY + earthRadius * 0.4, earthRadius * 0.3, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore(); // Remove clipping

    // Helper function to draw a single leaf
    function drawLeaf(x, y, scale, rotation) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(rotation);
        ctx.scale(scale, scale);
        
        ctx.beginPath();
        // Leaf body shape
        ctx.moveTo(0, 0);
        ctx.quadraticCurveTo(20, -20, 40, 0);
        ctx.quadraticCurveTo(20, 20, 0, 0);
        ctx.fillStyle = '#32CD32';
        ctx.fill();
        ctx.strokeStyle = '#006400'; // DarkGreen
        ctx.lineWidth = 1.5;
        ctx.stroke();
        
        // Leaf vein
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(35, 0);
        ctx.strokeStyle = '#006400';
        ctx.lineWidth = 1.5;
        ctx.stroke();
        
        ctx.restore();
    }

    // Draw a crown of leaves around the Earth
    const leafCount = 12;
    for (let i = 0; i < leafCount; i++) {
        const angle = (Math.PI * 2 / leafCount) * i;
        const distance = earthRadius + (earthRadius * 0.2); // Padding from Earth
        const lx = centerX + distance * Math.cos(angle);
        const ly = centerY + distance * Math.sin(angle);
        
        // Rotate leaves to point outwards from center
        const rotation = angle;
        // Scale leaf responsively relative to earth size
        drawLeaf(lx, ly, earthRadius / 80, rotation); 
    }

    // Add customized text
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = '#FFFFFF'; // White text
    ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    
    // Dynamically size based on image dimensions
    let fontSize = Math.min(width, height) * 0.12;
    ctx.font = `bold ${fontSize}px "Arial Black", sans-serif`;
    
    // Scale down text if it's too long for the image width
    let textWidth = ctx.measureText(text).width;
    if (textWidth > width * 0.9) {
        fontSize = fontSize * (width * 0.9) / textWidth;
        ctx.font = `bold ${fontSize}px "Arial Black", sans-serif`;
    }

    // Place text at the top
    ctx.fillText(text, width / 2, Math.max(height * 0.15, fontSize * 1.5));

    return canvas;
}