Please bookmark this page to avoid losing your image tool!

Image Prism Light Dispersion Filter Effect Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Prism Light Dispersion Filter Effect Tool allows users to apply a light dispersion effect to images. By adjusting the dispersion amount, users can create a visually striking separation of colors across the image, emulating the look of rainbow-like prismatic effects. This tool is ideal for enhancing photographs, creating artistic designs, or adding unique visual flair to graphics for social media, websites, and digital presentations.

Leave a Reply

Your email address will not be published. Required fields are marked *