Image HSL Adjuster

function processImage(originalImg, hueOffset = 0, saturationOffset = 0, lightnessOffset = 0) {
    // Ensure parameters are numbers
    hueOffset = Number(hueOffset) || 0;             // Range from -180 to 180 (degrees)
    saturationOffset = Number(saturationOffset) || 0; // Range from -100 to 100 (percentage)
    lightnessOffset = Number(lightnessOffset) || 0;   // Range from -100 to 100 (percentage)

    // Create a canvas to work with the image data
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image onto canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Get image data
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // Helper function to convert RGB to HSL
    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 * 360, s, l];
    }

    // Helper function to convert HSL to RGB
    function hslToRgb(h, s, l) {
        let r, g, b;
        
        // Normalize hue back to 0-1 range for the formula
        h /= 360;
        
        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);
        }
        
        return [r * 255, g * 255, b * 255];
    }

    // Process each pixel
    for (let i = 0; i < data.length; i += 4) {
        // Skip fully transparent pixels to save computation
        if (data[i + 3] === 0) continue;
        
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        
        // Convert to HSL
        let [h, s, l] = rgbToHsl(r, g, b);
        
        // Adjust Hue (rotate and wrap correctly between 0-360)
        h = (h + hueOffset) % 360;
        if (h < 0) h += 360;
        
        // Adjust Saturation (clamp between 0-1)
        s = s + (saturationOffset / 100);
        s = Math.max(0, Math.min(1, s));
        
        // Adjust Lightness (clamp between 0-1)
        l = l + (lightnessOffset / 100);
        l = Math.max(0, Math.min(1, l));
        
        // Convert back to RGB
        const [nr, ng, nb] = hslToRgb(h, s, l);
        
        // Assign new RGB values to the pixel array
        data[i] = nr;
        data[i + 1] = ng;
        data[i + 2] = nb;
        // Alpha (data[i + 3]) remains unchanged
    }
    
    // Put adjusted image data back to canvas
    ctx.putImageData(imageData, 0, 0);
    
    return canvas;
}