Please bookmark this page to avoid losing your image tool!

Image Snow Filter Application

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
function processImage(originalImg, snowflakeCount = 200, snowflakeColor = "white", minSnowflakeSize = 1, maxSnowflakeSize = 4) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // It's crucial that the image is loaded for naturalWidth/Height to be correct.
    // Also, ensure the canvas 2D context is available.
    if (!ctx) {
        console.error("Canvas 2D context is not available. Cannot process image.");
        // Return an empty canvas if context cannot be obtained.
        // Depending on consumer, throwing an error might be more appropriate.
        return canvas; 
    }

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // If image dimensions are zero (e.g., image not loaded or is invalid),
    // set canvas to 0x0 and return it to prevent drawing errors.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Original image has zero width or height. Ensure the image is fully loaded and valid before processing.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

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

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

    // Sanitize and prepare parameters for snowflake generation.
    // Ensure snowflakeCount is a non-negative number.
    const count = Math.max(0, Number(snowflakeCount));
    // Ensure snowflakeColor is a string.
    const color = String(snowflakeColor);
    // Ensure snowflake sizes are numbers and non-negative.
    const minSize = Math.max(0, Number(minSnowflakeSize));
    const maxSize = Math.max(0, Number(maxSnowflakeSize));
    
    // Determine the actual min and max radius for snowflakes.
    // This corrects cases where minSnowflakeSize might be specified larger than maxSnowflakeSize.
    const actualMinRadius = Math.min(minSize, maxSize);
    const actualMaxRadius = Math.max(minSize, maxSize);
    
    // Set the fill style once for all snowflakes, for efficiency.
    ctx.fillStyle = color;

    // Loop to generate and draw each snowflake.
    for (let i = 0; i < count; i++) {
        // Randomly determine the snowflake's position.
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        
        let radius;
        // If min and max radius are the same, all snowflakes will have this fixed radius.
        if (actualMinRadius === actualMaxRadius) {
            radius = actualMinRadius;
        } else {
            // Otherwise, calculate a random radius within the specified range.
            radius = actualMinRadius + Math.random() * (actualMaxRadius - actualMinRadius);
        }

        // Draw the snowflake (a filled circle) only if its radius is greater than 0.
        // An arc with radius 0 might behave inconsistently or do nothing.
        // Negative radius would cause an error, but our sanitization ensures radius >= 0.
        if (radius > 0) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI); // Draw a full circle.
            ctx.fill();
        }
    }

    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Snow Filter Application allows users to enhance their images by applying a snow effect. Users can customize the intensity of the snow by adjusting the number of snowflakes, their color, and varying sizes. This tool is perfect for creating winter-themed visuals, festive greetings, or simply adding a unique touch to photographs. Whether for personal projects, social media posts, or seasonal marketing campaigns, this application makes it easy to evoke a snowy atmosphere in any image.

Leave a Reply

Your email address will not be published. Required fields are marked *