Image HSL Adjustment Tool

/**
 * Adjusts the Hue, Saturation, and Lightness (HSL) of an image.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} hue The hue adjustment value in degrees. Ranges from -180 to 180. Default is 0.
 * @param {number} saturation The saturation adjustment value. Ranges from -100 to 100. Default is 0.
 * @param {number} lightness The lightness adjustment value. Ranges from -100 to 100. Default is 0.
 * @returns {HTMLCanvasElement} A new canvas element with the adjusted image.
 */
function processImage(originalImg, hue = 0, saturation = 0, lightness = 0) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Set canvas dimensions to match the image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // Get the image pixel data
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Helper function to convert RGB to HSL
    // Input: r, g, b in [0, 255]
    // Output: h in [0, 360], s in [0, 1], l in [0, 1]
    const 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 = 0, 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
    // Input: h in [0, 360], s in [0, 1], l in [0, 1]
    // Output: r, g, b in [0, 255]
    const 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;
            h /= 360;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }

        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    };


    // Iterate over each pixel (4 bytes at a time: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        // Convert the pixel's RGB values to HSL
        let [h, s, l] = rgbToHsl(data[i], data[i + 1], data[i + 2]);

        // Apply HSL adjustments
        h = (h + hue) % 360;
        if (h < 0) {
            h += 360;
        }

        s += saturation / 100;
        s = Math.max(0, Math.min(1, s)); // Clamp saturation between 0 and 1

        l += lightness / 100;
        l = Math.max(0, Math.min(1, l)); // Clamp lightness between 0 and 1

        // Convert the adjusted HSL values back to RGB
        const [r, g, b] = hslToRgb(h, s, l);

        // Update the pixel data with the new RGB values
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}