Chromatic Aberration Image Effect Generator

function processImage(
    originalImg,
    redShiftX = 6,
    redShiftY = 0,
    greenShiftX = 0,
    greenShiftY = 0,
    blueShiftX = -6,
    blueShiftY = 0
) {
    // Parse parameters to ensure they are handled as numbers
    const rX = Number(redShiftX);
    const rY = Number(redShiftY);
    const gX = Number(greenShiftX);
    const gY = Number(greenShiftY);
    const bX = Number(blueShiftX);
    const bY = Number(blueShiftY);

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

    // Output and working canvas setup
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Draw the original image to extract its pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);

    const srcImageData = ctx.getImageData(0, 0, width, height);
    const dstImageData = ctx.createImageData(width, height);

    const srcData = srcImageData.data;
    const dstData = dstImageData.data;

    // Loop through every pixel to apply the channel shift
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4;
            let aR = 0, aG = 0, aB = 0;

            // Shift Red Channel
            const rx = x - rX;
            const ry = y - rY;
            if (rx >= 0 && rx < width && ry >= 0 && ry < height) {
                const rIndex = (ry * width + rx) * 4;
                dstData[i] = srcData[rIndex];
                aR = srcData[rIndex + 3];
            } else {
                dstData[i] = 0; // Black/empty bounds
            }

            // Shift Green Channel
            const gx = x - gX;
            const gy = y - gY;
            if (gx >= 0 && gx < width && gy >= 0 && gy < height) {
                const gIndex = (gy * width + gx) * 4;
                dstData[i + 1] = srcData[gIndex + 1];
                aG = srcData[gIndex + 3];
            } else {
                dstData[i + 1] = 0;
            }

            // Shift Blue Channel
            const bx = x - bX;
            const by = y - bY;
            if (bx >= 0 && bx < width && by >= 0 && by < height) {
                const bIndex = (by * width + bx) * 4;
                dstData[i + 2] = srcData[bIndex + 2];
                aB = srcData[bIndex + 3];
            } else {
                dstData[i + 2] = 0;
            }

            // Combine alpha max value to ensure edges generated by shifts are rendered accurately (even on transparent images)
            dstData[i + 3] = Math.max(srcData[i + 3], aR, aG, aB);
        }
    }

    // Apply the manipulated data object to the canvas
    ctx.putImageData(dstImageData, 0, 0);

    return canvas;
}