Photo Editing Software

/**
 * Applies various photo editing effects to an image.
 * This function uses the Canvas API's filter property to apply effects like
 * brightness, contrast, saturation, grayscale, etc.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [brightness=100] The brightness of the image in percent. 100 is no change.
 * @param {number} [contrast=100] The contrast of the image in percent. 100 is no change.
 * @param {number} [saturate=100] The saturation of the image in percent. 100 is no change.
 * @param {number} [grayscale=0] The amount of grayscale to apply in percent. 0 is no change.
 * @param {number} [sepia=0] The amount of sepia to apply in percent. 0 is no change.
 * @param {number} [invert=0] The amount of color inversion to apply in percent. 0 is no change.
 * @param {number} [hueRotate=0] The hue rotation to apply in degrees. 0 is no change.
 * @param {number} [blur=0] The blur radius to apply in pixels. 0 is no change.
 * @param {number} [opacity=100] The opacity of the image in percent. 100 is fully opaque.
 * @returns {HTMLCanvasElement} A canvas element with the edited 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
    // Use naturalWidth/Height to get the original image size, not the displayed size
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Construct the filter string from the parameters
    // This string follows the CSS filter property syntax
    const filterString = `
        brightness(${brightness}%)
        contrast(${contrast}%)
        saturate(${saturate}%)
        grayscale(${grayscale}%)
        sepia(${sepia}%)
        invert(${invert}%)
        hue-rotate(${hueRotate}deg)
        blur(${blur}px)
        opacity(${opacity}%)
    `.trim().replace(/\s+/g, ' '); // Clean up whitespace

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

    // Draw the image onto the canvas. The filter will be applied during this operation.
    ctx.drawImage(originalImg, 0, 0);

    // Return the canvas element, which now contains the edited image
    return canvas;
}