Image Static Noise Filter Effect Tool

function processImage(originalImg, noiseAmount = 25) {
    let currentNoiseAmount = Number(noiseAmount);

    // Validate and sanitize noiseAmount
    if (isNaN(currentNoiseAmount)) {
        console.warn(`Image Static Noise Filter: Invalid noiseAmount provided ('${noiseAmount}'). Using default value 0 (no noise).`);
        currentNoiseAmount = 0;
    }
    currentNoiseAmount = Math.max(0, currentNoiseAmount); // Ensure noiseAmount is not negative

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth and naturalHeight for intrinsic image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Check if the image has valid dimensions (e.g., it's loaded)
    if (width === 0 || height === 0) {
        console.warn("Image Static Noise Filter: originalImg has zero width or height. Ensure it's fully loaded and valid.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas; // Return an empty (0x0) canvas
    }

    canvas.width = width;
    canvas.height = height;

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

    // If noiseAmount is 0, no processing is needed beyond drawing the original image
    if (currentNoiseAmount === 0) {
        return canvas;
    }

    let imageData;
    try {
        // Get the image data from the canvas
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Image Static Noise Filter: Could not get image data. This may be due to cross-origin image restrictions. Ensure the image is served with appropriate CORS headers if from a different domain, and that the Image element has `crossorigin='anonymous'` set.", e);
        // Return the canvas with the original image drawn (no filter applied)
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Iterate over each pixel (each pixel has 4 components: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        // Generate random noise values for R, G, B channels
        // Noise value is in the range [-currentNoiseAmount, +currentNoiseAmount)
        const rNoise = (Math.random() * 2 - 1) * currentNoiseAmount;
        const gNoise = (Math.random() * 2 - 1) * currentNoiseAmount;
        const bNoise = (Math.random() * 2 - 1) * currentNoiseAmount;

        // Add noise to the Red channel and clamp to [0, 255]
        data[i]     = Math.max(0, Math.min(255, data[i] + rNoise));
        // Add noise to the Green channel and clamp to [0, 255]
        data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + gNoise));
        // Add noise to the Blue channel and clamp to [0, 255]
        data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + bNoise));
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}