Photo RGB Split Filter

function processImage(originalImg, redOffsetX = 5, redOffsetY = 0, greenOffsetX = 0, greenOffsetY = 0, blueOffsetX = -5, blueOffsetY = 0) {
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently hint for performance

    if (!ctx) {
        console.error("Canvas 2D context not available. Your browser might not support it.");
        // Return an empty canvas or throw an error, as per desired error handling.
        // For now, returning the canvas, which will be blank.
        return canvas;
    }

    // Draw the original image onto the canvas. This is necessary to be able to read its pixel data.
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    let originalImageData;
    try {
        // Get the pixel data of the drawn image.
        originalImageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        // This can happen if the image is from a different origin and a CORS policy prevents reading its pixels.
        console.error("Could not get ImageData from canvas. This might be due to cross-origin image restrictions.", e);
        // In this case, pixel manipulation is not possible. We return the canvas with the original image drawn.
        // The user should ensure the image is CORS-enabled if from another domain.
        return canvas;
    }

    // Create a new ImageData object to hold the manipulated pixels.
    const outputImageData = ctx.createImageData(width, height);

    const originalData = originalImageData.data; // Uint8ClampedArray of [R,G,B,A, R,G,B,A, ...]
    const outputData = outputImageData.data;

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

            // Round offsets to nearest integers as pixel coordinates must be integers.
            const rOffsetX = Math.round(redOffsetX);
            const rOffsetY = Math.round(redOffsetY);
            const gOffsetX = Math.round(greenOffsetX);
            const gOffsetY = Math.round(greenOffsetY);
            const bOffsetX = Math.round(blueOffsetX);
            const bOffsetY = Math.round(blueOffsetY);

            // Calculate source coordinates for the red channel.
            // Clamp coordinates to be within the image boundaries [0, width-1] and [0, height-1].
            const srcRx = Math.max(0, Math.min(width - 1, x - rOffsetX));
            const srcRy = Math.max(0, Math.min(height - 1, y - rOffsetY));
            const redSourceIndex = (srcRy * width + srcRx) * 4;

            // Calculate source coordinates for the green channel.
            const srcGx = Math.max(0, Math.min(width - 1, x - gOffsetX));
            const srcGy = Math.max(0, Math.min(height - 1, y - gOffsetY));
            const greenSourceIndex = (srcGy * width + srcGx) * 4;

            // Calculate source coordinates for the blue channel.
            const srcBx = Math.max(0, Math.min(width - 1, x - bOffsetX));
            const srcBy = Math.max(0, Math.min(height - 1, y - bOffsetY));
            const blueSourceIndex = (srcBy * width + srcBx) * 4;

            // Assign the R, G, B values to the output pixel from their respective shifted source locations.
            outputData[outputIndex + 0] = originalData[redSourceIndex + 0];   // Red component
            outputData[outputIndex + 1] = originalData[greenSourceIndex + 1]; // Green component
            outputData[outputIndex + 2] = originalData[blueSourceIndex + 2]; // Blue component
            
            // Alpha component: Use the alpha from one of the source pixels.
            // The green channel is often centered by default, making its alpha a good candidate.
            // Alternatively, use alpha from the original pixel at (x,y): originalData[outputIndex + 3].
            outputData[outputIndex + 3] = originalData[greenSourceIndex + 3]; // Alpha component
        }
    }

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

    // Return the canvas element with the RGB split effect applied.
    return canvas;
}