Please bookmark this page to avoid losing your image tool!

Image Light Grunge Filter With Artifacts

(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 light grunge filter with artifacts to an image.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} grungeLevel A number between 0 and 1 representing the intensity of the grunge texture. Defaults to 0.4.
 * @param {number} artifactCount The number of grunge artifacts (scratches, specks) to add to the image. Defaults to 150.
 * @returns {HTMLCanvasElement} A new canvas element with the filter applied.
 */
function processImage(originalImg, grungeLevel = 0.4, artifactCount = 150) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Apply base image adjustments for a faded, aged look
    ctx.filter = 'saturate(70%) contrast(120%) brightness(105%)';
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none'; // Reset filter for subsequent operations

    // 3. Generate and apply a noise/grunge texture overlay
    // Create a temporary canvas for the texture
    const textureCanvas = document.createElement('canvas');
    textureCanvas.width = width;
    textureCanvas.height = height;
    const textureCtx = textureCanvas.getContext('2d');
    const textureImageData = textureCtx.createImageData(width, height);
    const textureData = textureImageData.data;

    // Fill the texture with random grayscale noise
    for (let i = 0; i < textureData.length; i += 4) {
        const value = Math.random() * 255;
        textureData[i] = value;     // Red
        textureData[i + 1] = value; // Green
        textureData[i + 2] = value; // Blue
        textureData[i + 3] = 255;   // Alpha
    }
    textureCtx.putImageData(textureImageData, 0, 0);

    // Overlay the texture onto the main canvas
    ctx.globalAlpha = Math.max(0, Math.min(1, grungeLevel)); // Clamp grungeLevel between 0 and 1
    ctx.globalCompositeOperation = 'soft-light';
    ctx.drawImage(textureCanvas, 0, 0);

    // Reset composite and alpha settings
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 4. Add artifacts (scratches and specks)
    for (let i = 0; i < artifactCount; i++) {
        const randomChoice = Math.random();

        // High probability for small specks
        if (randomChoice < 0.8) {
            // Draw a speck
            const x = Math.random() * width;
            const y = Math.random() * height;
            const radius = Math.random() * 1.5;
            const isLight = Math.random() > 0.5;
            const color = isLight ? '255, 255, 255' : '0, 0, 0';
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(${color}, ${Math.random() * 0.5})`;
            ctx.fill();
        } else {
            // Draw a scratch
            const x1 = Math.random() * width;
            const y1 = Math.random() * height;
            const length = (Math.random() * width) / 7;
            const angle = Math.random() * Math.PI * 2;
            const x2 = x1 + Math.cos(angle) * length;
            const y2 = y1 + Math.sin(angle) * length;
            const isLight = Math.random() > 0.5;
            const color = isLight ? '255, 255, 255' : '0, 0, 0';

            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = `rgba(${color}, ${Math.random() * 0.3})`;
            ctx.lineWidth = Math.random() * 1.5 + 0.5;
            ctx.stroke();
        }
    }

    // 5. Return the final canvas
    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 Light Grunge Filter With Artifacts’ tool allows users to apply a light grunge effect to images, creating an aged, textured look. By adjusting the intensity of the grunge texture and the number of artifacts such as scratches and specks, users can achieve various artistic styles. This tool is ideal for enhancing photos for creative projects, giving them a vintage or distressed appearance, and can be used in graphic design, social media posts, and digital art.

Leave a Reply

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