Image Maximalist Filter Effect Application

function processImage(originalImg, contrastLevel = 2.0, saturationLevel = 2.0, posterizeSteps = 6) {

    // Helper function to convert RGB to HSL
    // r, g, b are in [0, 255]
    function rgbToHsl(r, g, b) {
        r /= 255; g /= 255; b /= 255;
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if (max === min) {
            h = s = 0; // achromatic
        } else {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [h, s, l]; // h, s, l are in [0, 1]
    }

    // Helper function to convert HSL to RGB
    // h, s, l are in [0, 1]
    function hslToRgb(h, s, l) {
        let r, g, b;
        if (s === 0) {
            r = g = b = l; // achromatic
        } else {
            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            };
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }
        // r, g, b are in [0, 1], scale to [0, 255]
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // array of [R, G, B, A, R, G, B, A, ...]

    // Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Apply Contrast
        // contrastLevel = 1.0 means no change. > 1 means more contrast.
        if (contrastLevel !== 1.0) {
            // Formula: NewValue = Factor * (OldValue - 128) + 128
            // This pushes values away from mid-gray (128)
            r = contrastLevel * (r - 128) + 128;
            g = contrastLevel * (g - 128) + 128;
            b = contrastLevel * (b - 128) + 128;

            // Clamp values to [0, 255]
            r = Math.max(0, Math.min(255, r));
            g = Math.max(0, Math.min(255, g));
            b = Math.max(0, Math.min(255, b));
        }
        
        // 2. Apply Saturation
        // saturationLevel = 1.0 means no change. > 1 means more saturation, 0 means grayscale.
        if (saturationLevel !== 1.0) {
            let hsl = rgbToHsl(r, g, b);
            hsl[1] *= saturationLevel; // Multiply saturation component (S)
            hsl[1] = Math.max(0, Math.min(1, hsl[1])); // Clamp S to [0, 1]
            
            let newRgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
            r = newRgb[0];
            g = newRgb[1];
            b = newRgb[2];
        }

        // 3. Apply Posterization
        // posterizeSteps: number of color levels per channel.
        // e.g., 2 means 2 levels (e.g. 0 and 255), 4 means 4 levels.
        // Skip if steps < 2 (no effect or invalid) or steps >= 256 (negligible effect).
        if (posterizeSteps >= 2 && posterizeSteps < 256) {
            const numLevels = parseInt(posterizeSteps.toString(), 10); // Ensure it's an integer
            const stepSize = 255 / (numLevels - 1);
            
            r = Math.round(r / stepSize) * stepSize;
            g = Math.round(g / stepSize) * stepSize;
            b = Math.round(b / stepSize) * stepSize;
        }
        
        // Update pixel data
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        // Alpha channel data[i+3] remains unchanged
    }

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

    return canvas;
}