Band Major Image Effect Generator

function processImage(originalImg, bandDirection = "horizontal", bandThickness = 40, effectStyle = "chromatic", effectIntensity = 15) {
    // Create canvas and context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Get image data for manipulation
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    
    // Create a copy of the pixel array for safe offset and cross-ref manipulations
    const srcData = new Uint8ClampedArray(data); 

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

    // Parse and sanitize parameters
    const direction = String(bandDirection).toLowerCase();
    const thickness = Math.max(1, parseInt(bandThickness, 10) || 40);
    const intensity = parseInt(effectIntensity, 10) || 15;
    const style = String(effectStyle).toLowerCase();

    // Loop through all pixels to apply the Band Major effect
    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            // Determine if the current pixel is located in a "major" band
            const isMajorBand = direction === "vertical"
                ? Math.floor(x / thickness) % 2 === 0
                : Math.floor(y / thickness) % 2 === 0;

            if (isMajorBand) {
                const i = (y * w + x) * 4;

                switch (style) {
                    case "chromatic": {
                        // Apply an RGB split / chromatic aberration effect on the major bands
                        const shiftR = Math.min(w - 1, x + intensity);
                        const shiftB = Math.max(0, x - intensity);
                        const iR = (y * w + shiftR) * 4;
                        const iB = (y * w + shiftB) * 4;
                        
                        data[i] = srcData[iR];         // Red channel offset Right
                        data[i+1] = srcData[i+1];      // Green channel original
                        data[i+2] = srcData[iB+2];     // Blue channel offset Left
                        break;
                    }
                    case "offset": {
                        // Shift the band by a spatial offset
                        let srcX = x;
                        let srcY = y;
                        if (direction === "horizontal") {
                            srcX = Math.min(w - 1, Math.max(0, x + intensity));
                        } else {
                            srcY = Math.min(h - 1, Math.max(0, y + intensity));
                        }
                        const srcI = (srcY * w + srcX) * 4;
                        data[i] = srcData[srcI];
                        data[i+1] = srcData[srcI+1];
                        data[i+2] = srcData[srcI+2];
                        break;
                    }
                    case "invert": {
                        // Invert colors in the major bands
                        data[i] = 255 - srcData[i];
                        data[i+1] = 255 - srcData[i+1];
                        data[i+2] = 255 - srcData[i+2];
                        break;
                    }
                    case "grayscale": {
                        // Desaturate the major bands to emphasize them differently
                        const gray = 0.299 * srcData[i] + 0.587 * srcData[i+1] + 0.114 * srcData[i+2];
                        data[i] = gray;
                        data[i+1] = gray;
                        data[i+2] = gray;
                        break;
                    }
                    case "posterize": {
                        // Reduce the number of colors representing major color banding limits
                        // Using intensity to define color reduction levels dynamically
                        const levels = Math.max(2, 20 - Math.min(18, intensity));
                        const step = 255 / (levels - 1);
                        data[i] = Math.round(srcData[i] / step) * step;
                        data[i+1] = Math.round(srcData[i+1] / step) * step;
                        data[i+2] = Math.round(srcData[i+2] / step) * step;
                        break;
                    }
                    default:
                        // Fallback to chromatic if unmapped style string provided
                        const fwR = Math.min(w - 1, x + intensity);
                        const fwB = Math.max(0, x - intensity);
                        data[i] = srcData[(y * w + fwR) * 4];
                        data[i+1] = srcData[i+1];
                        data[i+2] = srcData[(y * w + fwB) * 4 + 2];
                        break;
                }
            }
        }
    }

    // Apply the manipulated data back to the canvas context
    ctx.putImageData(imgData, 0, 0);
    
    return canvas;
}