Image Color Correction Tool

/**
 * Applies color correction to an image.
 *
 * @param {HTMLImageElement} originalImg The original image object.
 * @param {number} [brightness=0] Brightness adjustment. Range: -100 to 100. 0 means no change.
 *                                 Positive values increase brightness, negative values decrease it.
 * @param {number} [contrast=0] Contrast adjustment. Range: -100 to 100. 0 means no change.
 *                               Positive values increase contrast, negative values decrease it.
 * @param {number} [saturation=0] Saturation adjustment. Range: -100 to 100. 0 means no change.
 *                                 Positive values increase saturation, -100 results in grayscale.
 * @param {number} [hue=0] Hue rotation in degrees. Range: 0 to 360. 0 means no change.
 * @returns {HTMLCanvasElement|HTMLElement} A canvas element with the color-corrected image,
 *                                          or an error message element if canvas is not supported.
 */
function processImage(originalImg, brightness = 0, contrast = 0, saturation = 0, hue = 0) {
    // Ensure parameters are numbers
    const numBrightness = Number(brightness);
    const numContrast = Number(contrast);
    const numSaturation = Number(saturation);
    const numHue = Number(hue);

    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height for intrinsic image dimensions, fallback to width/height
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        // Fallback for browsers that don't support canvas 2D context
        console.error("Canvas 2D context is not supported.");
        const errorElement = document.createElement('p');
        errorElement.textContent = 'Error: Canvas 2D context is not supported in this browser.';
        return errorElement;
    }

    // Calculate CSS filter values based on input parameters
    // Brightness: User input -100 to 100. CSS filter: 0 (0%) to 2 (200%). 1 (100%) is original.
    const brightnessValue = Math.max(0, 1 + numBrightness / 100); 
    // Contrast: User input -100 to 100. CSS filter: 0 (0%) to 2 (200%). 1 (100%) is original.
    const contrastValue = Math.max(0, 1 + numContrast / 100);
    // Saturation: User input -100 to 100. CSS filter: 0 (0%) to 2 (200%). 1 (100%) is original.
    const saturationValue = Math.max(0, 1 + numSaturation / 100);
    // Hue: User input 0 to 360 degrees. CSS filter: 0deg to 360deg. 0deg is original.
    // Negative hue values are also valid in CSS hue-rotate, e.g., -90deg is same as 270deg.
    // We can keep it as is, or use numHue % 360 to normalize if preferred.
    // For consistency, let's ensure it's handled like CSS (which allows any angle).
    const hueValue = numHue;

    // Build the filter string
    // The order of filters can matter for combined effects.
    // A common order is brightness, contrast, saturation, then hue rotation.
    let filters = [];

    // Add brightness filter if it's not the default (1)
    if (brightnessValue !== 1) {
        filters.push(`brightness(${brightnessValue})`);
    }
    // Add contrast filter if it's not the default (1)
    if (contrastValue !== 1) {
        filters.push(`contrast(${contrastValue})`);
    }
    // Add saturate filter if it's not the default (1)
    if (saturationValue !== 1) {
        filters.push(`saturate(${saturationValue})`);
    }
    // Add hue-rotate filter if it's not the default (0deg)
    if (hueValue !== 0) {
        filters.push(`hue-rotate(${hueValue}deg)`);
    }
    
    // Apply filters if any are active
    if (filters.length > 0) {
        if (typeof ctx.filter !== 'undefined') {
            ctx.filter = filters.join(' ');
        } else {
            // If ctx.filter is not supported, the image will be drawn without these CSS filters.
            // Log a warning. For a production tool, a fallback to pixel manipulation might be considered,
            // but that significantly increases complexity.
            console.warn("CanvasRenderingContext2D.filter is not supported in this browser. Color correction may not apply.");
        }
    }

    // Draw the original image onto the canvas.
    // If filters were applied, they will affect this drawing operation.
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error drawing image onto canvas:", e);
        const errorElement = document.createElement('p');
        errorElement.textContent = 'Error: Could not process the image.';
        return errorElement;
    }
    
    // Reset the filter property for the context if it were to be reused.
    // Not strictly necessary here as we are returning the canvas and its context is scoped to this operation.
    // if (typeof ctx.filter !== 'undefined') {
    //    ctx.filter = 'none';
    // }

    return canvas;
}