Photo Festival Lantern Filter Effect Tool

async function processImage(
    originalImg,
    overlayColor = "rgba(255, 100, 0, 0.2)",    // string: Color of the overall warm overlay (e.g., "rgba(255,100,0,0.2)")
    numLanterns = 7,                            // number: Number of lanterns to draw
    lanternBodyColor = "rgba(210, 40, 0, 0.75)",// string: Color of the lantern bodies (e.g., "rgba(210,40,0,0.75)")
    lanternGlowColor = "rgba(255, 180, 50, 0.7)",// string: Color of the light glow around lanterns (e.g., "rgba(255,180,50,0.7)")
    minLanternRadius = 15,                      // number: Minimum radius of a lantern body in pixels
    maxLanternRadius = 40,                      // number: Maximum radius of a lantern body in pixels
    glowSizeFactor = 1.5                        // number: Multiplier for lantern radius to determine its glow's blur size (e.g., 1.5 means blur is 1.5x radius)
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height if available (intrinsic image size), otherwise fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        // This typically means the image hasn't loaded its dimensions yet.
        // The caller should ensure originalImg is fully loaded.
        console.warn("Original image dimensions are 0. Ensure the image is loaded before processing. Returning an empty canvas.");
        return canvas;
    }

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

    // 2. Draw Lanterns

    // Ensure minRadius and maxRadius are handled correctly even if user swaps them or sets them equal.
    const actualMinRadius = Math.min(minLanternRadius, maxLanternRadius);
    const actualMaxRadius = Math.max(minLanternRadius, maxLanternRadius);
    const radiusDifference = actualMaxRadius - actualMinRadius;

    for (let i = 0; i < numLanterns; i++) {
        // Determine random radius for the current lantern
        const radius = Math.random() * radiusDifference + actualMinRadius;
        
        // Determine random position for the lantern
        // Lanterns are typically hung, so they often appear in the upper parts of a scene.
        // We allow them to be partially off-screen for a more natural, less constrained look.
        const x = Math.random() * canvas.width; 
        // Bias y-coordinate of lantern centers towards the top 75% of the image height
        const y = Math.random() * (canvas.height * 0.75); 

        // Configure the glow effect for the lantern
        ctx.shadowColor = lanternGlowColor;       // Color of the glow
        ctx.shadowBlur = Math.max(0, radius * glowSizeFactor); // How blurred/spread-out the glow is. Ensure non-negative.

        // Draw the lantern body (a simple circle)
        // This shape will cast the shadow configured above, creating the glow effect.
        ctx.fillStyle = lanternBodyColor;
        ctx.beginPath();
        ctx.arc(x, y, Math.max(0.1, radius), 0, Math.PI * 2); // Full circle. Ensure radius is positive for arc.
        ctx.fill();

        // Reset shadow properties after drawing each lantern.
        // This is crucial to prevent subsequent drawing operations (other lanterns, overall overlay)
        // from unintentionally inheriting these shadow settings.
        ctx.shadowColor = 'transparent'; // Effectively disables the shadow
        ctx.shadowBlur = 0;
        // ctx.shadowOffsetX and ctx.shadowOffsetY default to 0 and are not changed, so no reset needed here.
    }

    // 3. Apply the overall warm color overlay
    // This step tints the entire image (including the original picture and the drawn lanterns)
    // with the specified overlayColor, helping to unify the "festival" mood.
    // Ensure default blending mode in case it was changed elsewhere (unlikely in this self-contained function).
    ctx.globalCompositeOperation = 'source-over'; 
    ctx.fillStyle = overlayColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    return canvas;
}