Image Grain Filter Application

/**
 * 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;
}