Image Sunscreen Appearance Analyzer

async function processImage(originalImg, sensitivity = 50, highlightColor = 'rgba(255, 0, 255, 0.5)') {

    /**
     * Helper function to convert 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].
     *
     * @param   Number  r       The red color value
     * @param   Number  g       The green color value
     * @param   Number  b       The blue color value
     * @return  Array           The HSL representation
     */
    function rgbToHsl(r, g, b) {
        r /= 255, g /= 255, b /= 255;
        let max = Math.max(r, g, b),
            min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if (max === min) {
            h = s = 0; // achromatic
        } else {
            let 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];
    }
    
    /**
     * Helper function to parse any valid CSS color string into an {r, g, b, a} object.
     * @param {string} color The CSS color string.
     * @returns {{r: number, g: number, b: number, a: number}} An object with RGBA values (0-255).
     */
    function parseColor(color) {
        const ctx = document.createElement('canvas').getContext('2d');
        if (!ctx) return {r: 255, g: 0, b: 255, a: 127}; // Fallback
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, 1, 1);
        const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
        return { r, g, b, a };
    }


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

    // Set canvas dimensions to the image dimensions
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // Create a new ImageData for the highlight overlay
    const highlightData = ctx.createImageData(canvas.width, canvas.height);
    const highlightPixels = highlightData.data;

    // Parse the user-defined highlight color
    const parsedHighlightColor = parseColor(highlightColor);

    // The core logic of the analyzer is to find pixels that are both very bright (high lightness)
    // and have very little color (low saturation). This is characteristic of a white/light sunscreen cast.
    // The sensitivity parameter adjusts the thresholds for what is considered "sunscreen".
    const sensitivityFactor = Math.max(0, Math.min(100, sensitivity)) / 100; // Clamp sensitivity between 0 and 1
    
    // Higher sensitivity means we accept lower lightness and higher saturation values
    const lightnessThreshold = 0.9 - (sensitivityFactor * 0.25); // from 0.9 down to 0.65
    const saturationThreshold = 0.1 + (sensitivityFactor * 0.25); // from 0.1 up to 0.35

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

        // Convert RGB pixel to HSL
        const [h, s, l] = rgbToHsl(r, g, b);

        // Check if the pixel matches the "sunscreen" criteria
        if (l > lightnessThreshold && s < saturationThreshold) {
            // If it does, color this pixel in our highlight overlay
            highlightPixels[i] = parsedHighlightColor.r;     // Red
            highlightPixels[i + 1] = parsedHighlightColor.g; // Green
            highlightPixels[i + 2] = parsedHighlightColor.b; // Blue
            highlightPixels[i + 3] = parsedHighlightColor.a; // Alpha
        }
    }

    // Now, draw the highlight overlay on top of the original image
    // We put the highlight pixel data onto a temporary canvas and then draw that canvas
    // onto our main canvas. This properly handles transparency.
    const highlightCanvas = document.createElement('canvas');
    highlightCanvas.width = canvas.width;
    highlightCanvas.height = canvas.height;
    const highlightCtx = highlightCanvas.getContext('2d');
    highlightCtx.putImageData(highlightData, 0, 0);

    ctx.drawImage(highlightCanvas, 0, 0);

    return canvas;
}