Image Light Grunge Filter Application

function processImage(originalImg, noiseAmount = 25, dirtAmount = 40, scratchAmount = 15, desaturation = 0.2) {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    // Using willReadFrequently is a performance hint for browsers for get/putImageData operations
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

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

    // 4. Get the pixel data from the canvas to manipulate
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Ensure parameter values are within a reasonable range
    const safeNoise = Math.max(0, noiseAmount);
    const safeDesaturation = Math.max(0, Math.min(1, desaturation));

    // 5. Iterate through each pixel to apply noise and desaturation
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Apply desaturation by blending the original color with its grayscale equivalent
        if (safeDesaturation > 0) {
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;
            r = r * (1 - safeDesaturation) + gray * safeDesaturation;
            g = g * (1 - safeDesaturation) + gray * safeDesaturation;
            b = b * (1 - safeDesaturation) + gray * safeDesaturation;
        }

        // Apply random noise to each color channel
        if (safeNoise > 0) {
            const noise = (Math.random() - 0.5) * safeNoise;
            r += noise;
            g += noise;
            b += noise;
        }

        // Clamp the RGB values to ensure they stay within the 0-255 range
        data[i] = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
    }

    // 6. Write the modified pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);

    // 7. Draw dirt particles on top of the modified image
    if (dirtAmount > 0) {
        // The number of particles is scaled by image area and the dirtAmount parameter
        const dirtCount = Math.floor((width * height / 2500) * (dirtAmount / 100));
        for (let i = 0; i < dirtCount; i++) {
            const x = Math.random() * width;
            const y = Math.random() * height;
            const radius = Math.random() * 1.5;
            const alpha = Math.random() * 0.4;
            ctx.fillStyle = `rgba(0, 0, 0, ${alpha})`;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    // 8. Draw scratches on top of the image
    if (scratchAmount > 0) {
        // The number of scratches is scaled by image size and the scratchAmount parameter
        const scratchCount = Math.floor((width / 40) * (scratchAmount / 100));
        for (let i = 0; i < scratchCount; i++) {
            const x1 = Math.random() * width;
            const y1 = Math.random() * height;
            const angle = Math.random() * Math.PI * 2;
            const length = (Math.random() * 0.5 + 0.2) * Math.min(width, height);
            const x2 = x1 + Math.cos(angle) * length;
            const y2 = y1 + Math.sin(angle) * length;

            // Scratches can be black or white
            const colorVal = Math.random() > 0.5 ? 255 : 0;
            const alpha = Math.random() * 0.25 + 0.1;

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

    // 9. Return the final canvas element with the grunge filter applied
    return canvas;
}