Image Glitch Filter Applicator

async function processImage(originalImg, sliceIntensity = 25, sliceOffset = 25, channelShift = 5) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can provide a performance boost in some browsers
    // when using getImageData/putImageData frequently.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

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

    canvas.width = w;
    canvas.height = h;

    // 1. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Slicing glitch effect: This effect takes horizontal slices of the image and shifts them.
    const numSlices = Math.floor(sliceIntensity);
    for (let i = 0; i < numSlices; i++) {
        // Pick a random vertical position (y) to start the slice.
        const sliceY = Math.random() * h;
        // The height of the slice is also random, scaling with image height to look proportional.
        const sliceHeight = Math.random() * (h / 15) + 1;
        // The horizontal offset is a random value within the sliceOffset range.
        const horizontalOffset = (Math.random() - 0.5) * sliceOffset * 2;

        // Draw a slice of the canvas back onto itself with the calculated offset.
        // We use the canvas as the source image, so glitches can compound on each other.
        ctx.drawImage(canvas,
            0, sliceY, // Source X, Y
            w, sliceHeight, // Source Width, Height
            horizontalOffset, sliceY, // Destination X, Y
            w, sliceHeight // Destination Width, Height
        );
    }

    // 3. Channel shift (chromatic aberration) effect
    if (channelShift > 0) {
        // Get the pixel data from the canvas that now has the slicing effect.
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        // Create a copy of the pixel data to read from. This is important to avoid
        // feedback loops where a shifted pixel's value is used to shift another pixel.
        const originalData = Uint8ClampedArray.from(data);

        // Iterate through every pixel (each pixel is 4 bytes: R, G, B, A).
        for (let i = 0; i < data.length; i += 4) {
            // Calculate a random offset for this pixel.
            const shift = Math.round((Math.random() - 0.5) * channelShift);
            if (shift === 0) continue;

            const offset = shift * 4;

            // Shift the Red channel value from a nearby pixel.
            const rIndex = i + offset;
            if (rIndex >= 0 && rIndex < data.length) {
                data[i] = originalData[rIndex];
            }

            // The Green channel (i + 1) is intentionally left untouched to act as an anchor.

            // Shift the Blue channel value from a nearby pixel in the opposite direction.
            const bIndex = i - offset;
            if (bIndex >= 0 && bIndex < data.length) {
                // We reference originalData's blue channel, which is at index + 2.
                data[i + 2] = originalData[bIndex + 2];
            }
        }

        // Put the modified, channel-shifted pixel data back onto the canvas.
        ctx.putImageData(imageData, 0, 0);
    }

    return canvas;
}