Image Processing Utility

/**
 * Applies various common image processing filters to an image.
 * Since the provided description was unclear, this function implements a
 * general utility for filters like grayscale, sepia, brightness, contrast, etc.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} grayscale The percentage of grayscale to apply (0-100). Default is 0.
 * @param {number} sepia The percentage of sepia to apply (0-100). Default is 0.
 * @param {number} invert The percentage of color inversion to apply (0-100). Default is 0.
 * @param {number} brightness The percentage of brightness to apply (e.g., 100 is normal, 0 is black, 200 is double brightness). Default is 100.
 * @param {number} contrast The percentage of contrast to apply (e.g., 100 is normal, 0 is gray, 200 is double contrast). Default is 100.
 * @param {number} blur The blur radius in pixels. Default is 0.
 * @param {number} saturate The saturation percentage (e.g., 100 is normal, 0 is grayscale, 200 is double saturation). Default is 100.
 * @param {number} hueRotate The angle in degrees to rotate the hue. Default is 0.
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
function processImage(originalImg, grayscale = 0, sepia = 0, invert = 0, brightness = 100, contrast = 100, blur = 0, saturate = 100, hueRotate = 0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // Coerce all parameters to numbers to be safe
    const p = {
        grayscale: Number(grayscale) || 0,
        sepia: Number(sepia) || 0,
        invert: Number(invert) || 0,
        brightness: Number(brightness) || 100,
        contrast: Number(contrast) || 100,
        blur: Number(blur) || 0,
        saturate: Number(saturate) || 100,
        hueRotate: Number(hueRotate) || 0
    };

    // Construct the CSS filter string from the parameters
    const filterString = [
        `grayscale(${p.grayscale}%)`,
        `sepia(${p.sepia}%)`,
        `invert(${p.invert}%)`,
        `brightness(${p.brightness}%)`,
        `contrast(${p.contrast}%)`,
        `saturate(${p.saturate}%)`,
        `blur(${p.blur}px)`,
        `hue-rotate(${p.hueRotate}deg)`
    ].join(' ');

    // Apply the filters to the canvas context
    ctx.filter = filterString;

    // Draw the original image onto the canvas, which will apply the filters
    ctx.drawImage(originalImg, 0, 0, width, height);

    return canvas;
}