Please bookmark this page to avoid losing your image tool!

Image Grain 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.
/**
 * Applies a grain filter effect to an image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} amount The intensity of the grain effect. A higher value results in more noticeable grain. Defaults to 20.
 * @param {string} monochrome A string 'true' or 'false' to determine if the grain is monochrome (grayscale) or colored. Defaults to 'true'.
 * @returns {HTMLCanvasElement} A new canvas element with the grain filter applied.
 */
function processImage(originalImg, amount = 20, monochrome = 'true') {
    // Create a canvas element to work with
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Set canvas dimensions to match the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Parse parameters
    const grainAmount = Number(amount);
    const isMonochrome = monochrome === 'true';

    // A Uint8ClampedArray will automatically clamp values between 0 and 255.
    // We iterate over each pixel (represented by 4 values: r, g, b, a).
    for (let i = 0; i < data.length; i += 4) {
        if (isMonochrome) {
            // For monochrome grain, generate one random value and apply it to R, G, and B.
            const noise = (Math.random() - 0.5) * grainAmount;
            data[i] += noise;     // Red
            data[i + 1] += noise; // Green
            data[i + 2] += noise; // Blue
        } else {
            // For colored grain, generate separate random values for each color channel.
            const rNoise = (Math.random() - 0.5) * grainAmount;
            const gNoise = (Math.random() - 0.5) * grainAmount;
            const bNoise = (Math.random() - 0.5) * grainAmount;

            data[i] += rNoise;     // Red
            data[i + 1] += gNoise; // Green
            data[i + 2] += bNoise; // Blue
        }
        // The alpha channel (data[i + 3]) remains unchanged.
    }

    // Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas with the applied effect
    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 Grain Filter Application allows users to apply a grain filter effect to their images, enhancing the visual texture. Users can adjust the intensity of the grain effect to create varied appearances, and choose between applying a monochrome (grayscale) or colored grain. This tool is suitable for photographers and graphic designers looking to give their images a vintage or artistic look, or for anyone wanting to add a unique stylistic element to their visuals.

Leave a Reply

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

Other Image Tools:

Image of Young Woman Sitting in Metro in Jan Saudek Style

Photo Watermark With Timestamp for Multiple Images Tool

Image Face Cropping Tool for Automated Detection and Extraction

Image CAD-Style Golden Rectangle Stencil Generator

Image VHS Effect Creator

Image Transparency Viewer

Image Color Channel Inspector

Image Text Overlay Creator

Comprehensive Image Utility Tool

Image To 2000s Low Quality Digital Camera Effect Tool

Image Headshot Cropper with 1:1 Resolution

Image AI Filter Effect Remover

Image Gloomy Effect Editor

Image Japanese Anime-Style Generator

3D Cartoon Style Image Creator

Image To Pixel-Style Converter

Image Black And White HUD Style With VHS Effects

Black and White MQ1 Reaper Drone Targeting Pod Image

Image Filter for MQ1 Reaper Drone Targeting Pod

Image Hyper-Realistic Portrait Triptych Generator

Image To Professional Architectural Render Blueprint Converter

Image Ultraviolet Camera Filter

Image Portrait Generator with Warm Golden Hour Lighting

Image Softly Lit Portrait Generator

Image Petal Count Identifier

Image Ball Creator

Image To CAD-Style Blueprint Converter

Image To Blueprint CAD Style Converter

Image To Clean CAD Blueprint Generator

Image To CAD Blueprint Generator

Image To Technical Blueprint Style Converter

Image To Blueprint-Style Drawing Converter

Image To Technical Blueprint Converter

Architectural Plan to Technical Blueprint Image Converter

Architectural Plan To Blueprint-Style Image Converter

Image To Blueprint Architectural Style Converter

See All →