Image Preview Tool For 1280 Normal And Color Inversion Adjustments

/**
 * Processes an image by resizing, flipping, inverting colors, and shifting hue.
 * This function is designed to act as a preview tool for various image adjustments.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [width=1280] The target width for the output image. The height is scaled to maintain the aspect ratio.
 * @param {number} [invert=0] Whether to invert the colors. Use 1 for true, 0 for false.
 * @param {string} [flip='none'] The flipping direction. Accepts 'none', 'horizontal', or 'vertical'.
 * @param {number} [hueShift=0] The amount to shift the hue in degrees. E.g., -60 for "-2 semitones".
 * @returns {HTMLCanvasElement} A canvas element containing the processed image.
 */
function processImage(originalImg, width = 1280, invert = 0, flip = 'none', hueShift = 0) {
    
    /**
     * Converts an RGB color value to HSL. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * Assumes r, g, and b are contained in the set [0, 255] and
     * returns h, s, and l in the set [0, 1].
     */
    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 = 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, s, l };
    }

    /**
     * Converts an HSL color value to RGB. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
     * Assumes h, s, and l are contained in the set [0, 1] and
     * returns r, g, and b in the set [0, 255].
     */
    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);
        }

        return {
            r: Math.round(r * 255),
            g: Math.round(g * 255),
            b: Math.round(b * 255)
        };
    }
    
    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    
    // 2. Calculate new dimensions while maintaining aspect ratio
    const aspectRatio = originalImg.naturalHeight / originalImg.naturalWidth;
    const height = Math.round(width * aspectRatio);
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');

    // 3. Apply flip transformation if specified
    if (flip === 'horizontal') {
        ctx.translate(width, 0);
        ctx.scale(-1, 1);
    } else if (flip === 'vertical') {
        ctx.translate(0, height);
        ctx.scale(1, -1);
    }
    
    // 4. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    // If no pixel manipulation is needed, return canvas as is
    if (invert === 0 && hueShift === 0) {
        return canvas;
    }

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

    // 6. Loop through each pixel and apply adjustments
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // Apply Hue Shift if specified
        if (hueShift !== 0) {
            const hsl = rgbToHsl(r, g, b);
            
            // Apply hue shift (hue is from 0-1, shift is in degrees)
            hsl.h += hueShift / 360;
            
            // Wrap hue value
            if (hsl.h > 1) hsl.h -= 1;
            if (hsl.h < 0) hsl.h += 1;
            
            const rgb = hslToRgb(hsl.h, hsl.s, hsl.l);
            r = rgb.r;
            g = rgb.g;
            b = rgb.b;
        }

        // Apply color inversion if specified
        if (invert === 1) {
            r = 255 - r;
            g = 255 - g;
            b = 255 - b;
        }

        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        // Alpha channel (data[i + 3]) is unchanged
    }
    
    // 7. Put the modified data back on the canvas
    ctx.putImageData(imageData, 0, 0);

    // 8. Return the final canvas
    return canvas;
}