Photo Editor

/**
 * Applies various photo editing effects to an image.
 * This function uses the Canvas API's filter property to adjust brightness, contrast,
 * saturation, and apply effects like grayscale, sepia, invert, hue rotation, and blur.
 *
 * @param {Image} originalImg The original javascript Image object to be processed.
 * @param {number} [brightness=100] The brightness percentage. 100 is original, 0 is black, >100 is brighter.
 * @param {number} [contrast=100] The contrast percentage. 100 is original, 0 is gray, >100 is higher contrast.
 * @param {number} [grayscale=0] The grayscale percentage. 0 is original, 100 is completely grayscale.
 * @param {number} [sepia=0] The sepia percentage. 0 is original, 100 is completely sepia.
 * @param {number} [saturate=100] The saturation percentage. 100 is original, 0 is unsaturated, >100 is super-saturated.
 * @param {number} [hueRotate=0] The hue rotation in degrees. 0 and 360 are original.
 * @param {number} [invert=0] The color inversion percentage. 0 is original, 100 is completely inverted.
 * @param {number} [blur=0] The blur radius in pixels. 0 is no blur.
 * @returns {HTMLCanvasElement} A canvas element with the edited image.
 */
function processImage(originalImg, brightness = 100, contrast = 100, grayscale = 0, sepia = 0, saturate = 100, hueRotate = 0, invert = 0, blur = 0) {
    // 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 dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Construct the CSS filter string from the function parameters.
    // The order of filters can affect the final output.
    const filterString = `
        brightness(${brightness}%)
        contrast(${contrast}%)
        grayscale(${grayscale}%)
        sepia(${sepia}%)
        saturate(${saturate}%)
        hue-rotate(${hueRotate}deg)
        invert(${invert}%)
        blur(${blur}px)
    `.trim().replace(/\s+/g, ' '); // Clean up лишние пробелы and newlines for a valid filter string

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

    // Draw the original image onto the canvas.
    // The browser applies the filter during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

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