Image Frosted Glass Filter Application

function processImage(originalImg, intensity = 10) {
    // Sanitize the intensity parameter
    // 'intensity' is the function parameter, 'effectiveIntensity' is the sanitized numeric value.
    let effectiveIntensity = Number(intensity);

    // If 'intensity' isn't a valid non-negative number, default to 10 and log a warning.
    if (isNaN(effectiveIntensity) || effectiveIntensity < 0) {
        console.warn(`Image Frosted Glass Filter: Invalid intensity value "${intensity}" provided. Using default value 10.`);
        effectiveIntensity = 10;
    }

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create a canvas element that will hold the processed image.
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    
    // Handle cases where the image might not be loaded or has no dimensions.
    if (width === 0 || height === 0) {
        console.warn("Image Frosted Glass Filter: Original image has zero width or height. Returning an empty canvas.");
        // The canvas is already 0x0 if width/height are 0, so we can just return it.
        return canvas;
    }
    
    // Get the 2D rendering context.
    // 'willReadFrequently' is a performance hint for browsers when using getImageData frequently,
    // though here it's called once for reading and once for writing.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Draw the original image onto the canvas. This is step 1.
    // If intensity is 0, this is all we need, as no frosting effect will be applied.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // If intensity is 0, no frosting effect is needed.
    // The canvas already contains the original image from the drawImage call above.
    if (effectiveIntensity === 0) {
        return canvas;
    }
    
    // Get the pixel data from the canvas (which currently holds the original image).
    const imageData = ctx.getImageData(0, 0, width, height);
    // 'data' is a Uint8ClampedArray containing the pixel data in RGBA order (flat array).
    const data = imageData.data; 

    // Create a new ImageData object to store the pixels of the frosted image.
    // This is crucial because we need to sample from the *original* undisturbed pixels
    // while constructing the new image. Modifying 'imageData' in place would lead to
    // cascading effects where already frosted pixels influence the frosting of subsequent pixels.
    const outputImageData = ctx.createImageData(width, height);
    const outputData = outputImageData.data; // This is the array we'll write the frosted pixels into.

    // Iterate over each pixel of the image.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // For each pixel (x,y) in the output, we pick a color from a random pixel
            // in its neighborhood in the *original* image.
            // The size of this neighborhood is determined by 'effectiveIntensity'.
            // A larger intensity means a wider area to pick from, resulting in a more "frosted" appearance.

            // Calculate random offsets. The range for each offset is [-effectiveIntensity, +effectiveIntensity].
            // Example: if effectiveIntensity is 5, offset can be -5, -4, ..., 0, ..., 4, 5.
            const randomXOffset = Math.floor(Math.random() * (2 * effectiveIntensity + 1)) - effectiveIntensity;
            const randomYOffset = Math.floor(Math.random() * (2 * effectiveIntensity + 1)) - effectiveIntensity;

            // Determine the coordinates of the source pixel to sample color from.
            let sourceX = x + randomXOffset;
            let sourceY = y + randomYOffset;

            // Clamp these coordinates to ensure they are within the image's boundaries (0 to width-1, 0 to height-1).
            sourceX = Math.max(0, Math.min(width - 1, sourceX));
            sourceY = Math.max(0, Math.min(height - 1, sourceY));

            // Calculate the indices in the flat pixel arrays for both the destination pixel (current x,y)
            // and the source pixel (randomly chosen sourceX,sourceY).
            // Each pixel occupies 4 bytes in the array (R, G, B, A).
            const destIndex = (y * width + x) * 4;
            const sourceIndex = (sourceY * width + sourceX) * 4;

            // Copy the RGBA color components from the chosen source pixel to the current destination pixel.
            outputData[destIndex]     = data[sourceIndex];     // Red component
            outputData[destIndex + 1] = data[sourceIndex + 1]; // Green component
            outputData[destIndex + 2] = data[sourceIndex + 2]; // Blue component
            outputData[destIndex + 3] = data[sourceIndex + 3]; // Alpha component (transparency)
        }
    }

    // After processing all pixels, put the modified pixel data (outputImageData, which now contains the frosted image)
    // back onto the canvas.
    ctx.putImageData(outputImageData, 0, 0);

    // Return the canvas element. It now displays the frosted version of the original image.
    // This canvas can be appended to the DOM or used as a source for further image operations.
    return canvas;
}