Please bookmark this page to avoid losing your image tool!

Image Rain Drop Enhancement Tool

(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, dropCount = 500, streakCount = 70, darkness = 0.5, maxDropSize = 2, maxStreakLength = 60) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image. Using naturalWidth/Height is safer.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // --- Step 1: Draw the original image ---
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // --- Step 2: Darken the image ---
    // This simulates the darker, overcast lighting typical of rainy weather.
    const validDarkness = Math.max(0, Math.min(1, darkness));
    if (validDarkness > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${validDarkness})`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    // Define a cool, bluish-white color for the rain elements
    const rainColor = '230, 230, 250';

    // --- Step 3: Add static raindrops ---
    // These represent small drops on the "camera lens" or static in the air.
    for (let i = 0; i < dropCount; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * maxDropSize;
        // Drops have varying opacity to look more natural
        const opacity = Math.random() * 0.5 + 0.2; // Opacity from 0.2 to 0.7

        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${rainColor}, ${opacity})`;
        ctx.fill();
    }

    // --- Step 4: Add falling rain streaks ---
    // These simulate the motion blur of falling rain.
    const streakAngle = Math.PI / 18; // ~10 degrees from vertical, for a slight slant

    for (let i = 0; i < streakCount; i++) {
        // Start position can be slightly off-canvas to make rain appear to enter the frame
        const x1 = Math.random() * canvas.width * 1.5 - canvas.width * 0.25;
        const y1 = Math.random() * canvas.height * 1.2 - canvas.height * 0.2;

        const length = (Math.random() * 0.7 + 0.3) * maxStreakLength + 15; // Min length of 15
        
        // Calculate the end point of the streak based on the angle and length
        const x2 = x1 + Math.sin(streakAngle) * length;
        const y2 = y1 + Math.cos(streakAngle) * length;
        
        const opacity = Math.random() * 0.3 + 0.15; // Streaks are more transparent (0.15 to 0.45)
        const lineWidth = Math.random() * 1.5 + 0.5; // Line width from 0.5px to 2px

        // Use a gradient for the streak to give it a fading effect
        const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
        gradient.addColorStop(0, `rgba(${rainColor}, ${opacity})`);
        gradient.addColorStop(0.5, `rgba(${rainColor}, ${opacity * 0.7})`);
        gradient.addColorStop(1, `rgba(${rainColor}, 0)`);
        
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = gradient;
        ctx.stroke();
    }

    // Return the final canvas element
    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 Rain Drop Enhancement Tool allows users to add a realistic rain effect to their images. This tool simulates rainy weather by darkening the image and overlaying static raindrops along with falling rain streaks. It is ideal for creative projects, image editing, and enhancing photographs to evoke a moody or atmospheric ambiance. Users can customize the number of raindrops, streaks, and overall darkness to achieve their desired effect, making it a versatile tool for photographers, graphic designers, and hobbyists looking to transform their images.

Leave a Reply

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