Image HSL Hue Inversion And Contrast Adjustment Tool

/**
 * Applies HSL hue shift and contrast adjustment to an image.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} [hueShift=180] The amount to shift the hue in degrees. A value of 180 inverts the hue.
 * @param {number} [contrastLevel=0] The level of contrast adjustment, from -100 to 100. 0 means no change.
 * @returns {HTMLCanvasElement|HTMLElement} A canvas element with the processed image, or an error element.
 */
function processImage(originalImg, hueShift = 180, contrastLevel = 0) {

    /**
     * Converts an RGB color value to HSL.
     * @param {number} r The red color value [0, 255].
     * @param {number} g The green color value [0, 255].
     * @param {number} b The blue color value [0, 255].
     * @returns {{h: number, s: number, l: number}} The HSL representation {h:[0,360], s:[0,100], l:[0,100]}.
     */
    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: h * 360, s: s * 100, l: l * 100 };
    };

    /**
     * Converts an HSL color value to RGB.
     * @param {number} h The hue [0, 360].
     * @param {number} s The saturation [0, 100].
     * @param {number} l The lightness [0, 100].
     * @returns {{r: number, g: number, b: number}} The RGB representation {r,g,b all in [0,255]}.
     */
    const hslToRgb = (h, s, l) => {
        let r, g, b;
        h /= 360;
        s /= 100;
        l /= 100;

        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: r * 255, g: g * 255, b: b * 255 };
    };

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

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);
    
    // Use try-catch for getImageData to handle cross-origin security errors
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not get image data.", e);
        const errorElement = document.createElement('p');
        errorElement.textContent = 'Error: Could not process the image. This may be due to cross-origin security restrictions.';
        errorElement.style.color = 'red';
        return errorElement;
    }

    const data = imageData.data;
    const finalHueShift = parseFloat(hueShift) || 0;
    const finalContrast = Math.max(-100, Math.min(100, parseFloat(contrastLevel) || 0));

    // Pre-calculate contrast factor for efficiency
    const contrastFactor = (259 * (finalContrast + 255)) / (255 * (259 - finalContrast));

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

        // 1. HSL Hue Shift
        const hsl = rgbToHsl(r, g, b);
        hsl.h = (hsl.h + finalHueShift) % 360;
        if (hsl.h < 0) {
            hsl.h += 360;
        }
        const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
        r = newRgb.r;
        g = newRgb.g;
        b = newRgb.b;

        // 2. Contrast Adjustment
        if (finalContrast !== 0) {
             r = contrastFactor * (r - 128) + 128;
             g = contrastFactor * (g - 128) + 128;
             b = contrastFactor * (b - 128) + 128;
        }

        // Clamp values to [0, 255]
        data[i] = Math.max(0, Math.min(255, r));
        data[i + 1] = Math.max(0, Math.min(255, g));
        data[i + 2] = Math.max(0, Math.min(255, b));
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}