Image Snowstorm Filter Effect Tool

// Your code here
function processImage(
    originalImg,
    flakeCountStr = "500",       // Number of snowflakes as a string
    maxFlakeSizeStr = "4",     // Maximum size (radius) of a snowflake as a string
    minFlakeSizeStr = "1",     // Minimum size (radius) of a snowflake as a string
    flakeColor = "rgba(255, 255, 255, 0.8)", // Color of snowflakes (CSS color string)
    varyOpacityStr = "true"    // Whether to vary snowflake opacity ("true" or "false")
) {
    // Parse numerical parameters from strings, with defaults for invalid inputs
    let flakeCount = parseInt(flakeCountStr, 10);
    if (isNaN(flakeCount) || flakeCount < 0) {
        flakeCount = 500; // Default value for flakeCount
    }

    let maxFlakeSize = parseFloat(maxFlakeSizeStr);
    if (isNaN(maxFlakeSize) || maxFlakeSize <= 0) {
        maxFlakeSize = 4; // Default value for maxFlakeSize
    }

    let minFlakeSize = parseFloat(minFlakeSizeStr);
    if (isNaN(minFlakeSize) || minFlakeSize <= 0) {
        minFlakeSize = 1; // Default value for minFlakeSize
    }

    // Ensure minFlakeSize is not greater than maxFlakeSize by swapping if necessary
    if (minFlakeSize > maxFlakeSize) {
        const temp = minFlakeSize;
        minFlakeSize = maxFlakeSize;
        maxFlakeSize = temp;
    }
    
    const varyOpacity = varyOpacityStr.toLowerCase() === "true";

    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    // Handle cases where image dimensions are invalid (e.g., image not loaded yet or broken)
    if (width === 0 || height === 0) {
        console.error("Image has zero width or height. Cannot apply snow effect.");
        // Return a small canvas with an error message
        canvas.width = 200; 
        canvas.height = 50;
        const ctxError = canvas.getContext('2d');
        if (ctxError) {
            ctxError.font = "12px Arial";
            ctxError.fillStyle = "red";
            ctxError.textAlign = "center";
            ctxError.textBaseline = "middle";
            ctxError.fillText("Error: Image has 0 dimensions.", canvas.width / 2, canvas.height / 2);
        }
        return canvas;
    }

    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);

    let parsedR, parsedG, parsedB, parsedBaseAlpha;
    let canVaryOpacityAfterParsing = false; // Flag to indicate if color was successfully parsed for opacity variation

    if (varyOpacity) {
        // Attempt to parse the flakeColor to its R, G, B, and Alpha components.
        // This allows varying the alpha channel for individual snowflakes.
        // A common trick is to use a temporary 1x1 canvas to let the browser parse the color string.
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        const tempCtx = tempCanvas.getContext('2d');
        
        if (tempCtx) { // Check if the 2D context was successfully obtained
            tempCtx.fillStyle = flakeColor; // Apply the user-provided color string
            tempCtx.fillRect(0, 0, 1, 1); // Draw a 1x1 pixel with this color
            const imageData = tempCtx.getImageData(0, 0, 1, 1).data; // Read the RGBA components
            parsedR = imageData[0];
            parsedG = imageData[1];
            parsedB = imageData[2];
            parsedBaseAlpha = imageData[3] / 255.0; // Alpha is normalized to a 0-1 range
            canVaryOpacityAfterParsing = true;
        }
        // If tempCtx is null (very unlikely in modern browsers) or color parsing fails,
        // canVaryOpacityAfterParsing will remain false.
    }

    // If not varying opacity (either by user choice or if color parsing failed),
    // set the fillStyle once for all snowflakes.
    if (!canVaryOpacityAfterParsing) {
        ctx.fillStyle = flakeColor;
    }
    
    // Draw snowflakes
    for (let i = 0; i < flakeCount; i++) {
        const x = Math.random() * width;  // Random x position for the snowflake
        const y = Math.random() * height; // Random y position for the snowflake
        
        // Calculate a random radius for the snowflake within the defined min/max range
        // If minFlakeSize equals maxFlakeSize, all flakes will have the same size.
        const radius = minFlakeSize + Math.random() * (maxFlakeSize - minFlakeSize);
        
        if (canVaryOpacityAfterParsing) {
            // If varying opacity is enabled and the color was successfully parsed,
            // calculate a new alpha for this snowflake and set its fillStyle.
            // This creates a depth effect by making some flakes more/less transparent.
            const randomOpacityFactor = 0.3 + Math.random() * 0.7; // Varies opacity from 30% to 100% of base alpha
            const currentAlpha = parsedBaseAlpha * randomOpacityFactor;
            ctx.fillStyle = `rgba(${parsedR}, ${parsedG}, ${parsedB}, ${currentAlpha})`;
        }
        // If not varying opacity (i.e., canVaryOpacityAfterParsing is false), 
        // ctx.fillStyle is already set to the original flakeColor (done before the loop).

        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false); // Draw a circle for the snowflake
        ctx.fill();
    }

    return canvas;
}