Image Settings Management Tool

/**
 * Applies various visual settings to an image using canvas filters.
 * This function allows adjusting brightness, contrast, saturation, grayscale,
 * sepia, color inversion, hue rotation, blur, and opacity.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [brightness=100] The brightness of the image in percent (e.g., 100 is original, 0 is black, 200 is double brightness).
 * @param {number} [contrast=100] The contrast of the image in percent (e.g., 100 is original, 0 is no contrast).
 * @param {number} [saturate=100] The color saturation of the image in percent (e.g., 100 is original, 0 is grayscale).
 * @param {number} [grayscale=0] The amount of grayscale to apply in percent (e.g., 0 is original, 100 is completely grayscale).
 * @param {number} [sepia=0] The amount of sepia effect to apply in percent (e.g., 0 is original, 100 is full sepia).
 * @param {number} [invert=0] The amount of color inversion in percent (e.g., 0 is original, 100 is fully inverted).
 * @param {number} [hueRotate=0] The hue rotation in degrees (e.g., 0-360).
 * @param {number} [blur=0] The blur radius in pixels (e.g., 0 is no blur, 5 is a 5px blur).
 * @param {number} [opacity=100] The opacity of the image in percent (e.g., 100 is fully opaque, 0 is transparent).
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
function processImage(
    originalImg,
    brightness = 100,
    contrast = 100,
    saturate = 100,
    grayscale = 0,
    sepia = 0,
    invert = 0,
    hueRotate = 0,
    blur = 0,
    opacity = 100
) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image's intrinsic size
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

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

    // Draw the original image onto the canvas.
    // The filter will be applied as the image is drawn.
    ctx.drawImage(originalImg, 0, 0);

    // Return the canvas with the modified image
    return canvas;
}