Image Diffusion Filter Effect Tool

function processImage(originalImg, strength = 5) {
    // Use naturalWidth and naturalHeight for intrinsic image dimensions
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    // If image dimensions are zero (e.g., image not loaded or is empty),
    // return an empty canvas of the correct (zero) size.
    if (width === 0 || height === 0) {
        return canvas;
    }

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        // This should ideally not happen in modern browsers for a 2D context
        console.error("Failed to get 2D context from canvas.");
        // Return the canvas, which will be blank
        return canvas;
    }

    // Draw the original image onto the canvas. This allows us to read its pixel data.
    // Specify width and height in drawImage to ensure it fills the canvas,
    // especially if originalImg.width/height attributes were set by CSS affecting its display size.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Validate and normalize the 'strength' parameter.
    // It should be a non-negative number.
    let numStrength = Number(strength);
    if (isNaN(numStrength) || numStrength < 0) {
        numStrength = 0; // Default to 0 (no effect) if strength is invalid or negative
    }
    
    // If strength is 0, no diffusion effect needs to be applied.
    // The canvas already contains the original image, so we can return it directly.
    if (numStrength === 0) {
        return canvas;
    }

    // Get the pixel data of the image drawn on the canvas.
    // Note: This can throw a SecurityError if the image is cross-origin and taints the canvas.
    let sourceImageData;
    try {
        sourceImageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Error getting ImageData: ", e);
        // Could be a CORS issue. Return the canvas with the original image drawn, without the effect.
        return canvas;
    }
    
    const sourceData = sourceImageData.data;

    // Create a new ImageData object to hold the processed pixel data.
    const targetImageData = ctx.createImageData(width, height);
    const targetData = targetImageData.data;

    // Iterate over each pixel in the image.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Calculate random offsets for diffusion.
            // (Math.random() - 0.5) results in a range from -0.5 to +0.5.
            // Multiplying by 2 gives a range from -1.0 to +1.0.
            // This is then scaled by numStrength to control the diffusion intensity.
            const offsetX = (Math.random() - 0.5) * 2 * numStrength;
            const offsetY = (Math.random() - 0.5) * 2 * numStrength;

            // Calculate the source pixel coordinates to sample from by adding the random offset.
            // Round to the nearest integer for pixel coordinates.
            let sampleX = Math.round(x + offsetX);
            let sampleY = Math.round(y + offsetY);

            // Clamp the sample coordinates to ensure they stay within the image boundaries.
            sampleX = Math.max(0, Math.min(width - 1, sampleX));
            sampleY = Math.max(0, Math.min(height - 1, sampleY));

            // Calculate the GIMP_हरी (linear) index for the source and target pixel data arrays.
            // Each pixel consists of 4 bytes (R, G, B, A).
            const sourcePixelIndex = (sampleY * width + sampleX) * 4;
            const targetPixelIndex = (y * width + x) * 4;

            // Copy the pixel data (R, G, B, A) from the randomly sampled source
            // pixel to the current target pixel.
            targetData[targetPixelIndex]     = sourceData[sourcePixelIndex];     // Red
            targetData[targetPixelIndex + 1] = sourceData[sourcePixelIndex + 1]; // Green
            targetData[targetPixelIndex + 2] = sourceData[sourcePixelIndex + 2]; // Blue
            targetData[targetPixelIndex + 3] = sourceData[sourcePixelIndex + 3]; // Alpha
        }
    }

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

    // Return the canvas element with the diffused image.
    return canvas;
}