Image Prism Light Dispersion Filter Effect Tool

function processImage(originalImg, dispersionAmount = 5) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be an optimization hint for some browsers
    // for faster getImageData/putImageData operations.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth and naturalHeight for intrinsic image dimensions.
    // This assumes originalImg is an HTMLImageElement that has finished loading.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // If the image has no dimensions (e.g., it's not loaded or is an invalid image),
    // set canvas to 0x0 and return it.
    if (width === 0 || height === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

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

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

    // Get the pixel data from the canvas.
    // Note: This will throw a SecurityError if the image is cross-origin and lacks CORS headers.
    // The function assumes the image is usable (same-origin or CORS-enabled).
    let originalImageData;
    try {
        originalImageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Error getting image data: ", e);
        // If image data can't be accessed (e.g. CORS issue),
        // return the canvas with the original image drawn, as processing isn't possible.
        return canvas;
    }
    
    const originalData = originalImageData.data;

    // Create a new ImageData object to store the processed pixels.
    const outputImageData = ctx.createImageData(width, height);
    const outputData = outputImageData.data;

    // Round the dispersionAmount to an integer pixel offset.
    // The sign of dispersionAmount determines the direction of the shift.
    const offset = Math.round(dispersionAmount);

    // Iterate over each pixel of the image.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Calculate the index for the current pixel in the flat data array.
            const currentIndex = (y * width + x) * 4;

            // Calculate source x-coordinates for the R, G, B channels, clamping to image bounds.
            // Red channel is shifted by -offset (e.g., to the left if offset is positive).
            const redSrcX = Math.max(0, Math.min(x - offset, width - 1));
            // Green channel remains at the original x-coordinate (no horizontal shift).
            const greenSrcX = x; 
            // Blue channel is shifted by +offset (e.g., to the right if offset is positive).
            const blueSrcX = Math.max(0, Math.min(x + offset, width - 1));

            // Calculate source indices in the flat pixel array for each channel.
            // The y-coordinate remains the same for this horizontal dispersion.
            const redSrcIndex = (y * width + redSrcX) * 4;
            const greenSrcIndex = (y * width + greenSrcX) * 4; // Index for the G channel of the pixel at (x,y)
            const blueSrcIndex = (y * width + blueSrcX) * 4;

            // Assign pixel data to the output ImageData.
            // Set the Red component from the shifted red source.
            outputData[currentIndex]     = originalData[redSrcIndex];
            // Set the Green component from the original position's green channel (no G shift).
            outputData[currentIndex + 1] = originalData[greenSrcIndex + 1];
            // Set the Blue component from the shifted blue source.
            outputData[currentIndex + 2] = originalData[blueSrcIndex + 2];
            // Set the Alpha component from the original position's alpha channel (preserve transparency).
            outputData[currentIndex + 3] = originalData[currentIndex + 3]; 
        }
    }

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

    return canvas;
}