Image Editing Tool

/**
 * A versatile image editing function that applies various filters and transformations.
 * Since the provided description "Kkj" was uninformative, this function provides a
 * set of common image editing capabilities like brightness, contrast, grayscale,
 * sepia, invert, blur, rotation, and flipping.
 *
 * @param {Image} originalImg The original javascript Image object to be processed.
 * @param {number} [brightness=0] Adjusts brightness. Range: -100 to 100. 0 means no change.
 * @param {number} [contrast=0] Adjusts contrast. Range: -100 to 100. 0 means no change.
 * @param {number} [grayscale=0] Converts the image to grayscale. 0 for no effect, 1 for full grayscale.
 * @param {number} [sepia=0] Applies a sepia tone. 0 for no effect, 1 for full sepia.
 * @param {number} [invert=0] Inverts the colors of the image. 0 for no effect, 1 for full inversion.
 * @param {number} [blur=0] Applies a Gaussian blur. Value is the blur radius in pixels.
 * @param {number} [rotate=0] Rotates the image by a given angle in degrees.
 * @param {number} [flipHorizontal=0] Flips the image horizontally. 0 for no flip, 1 for flip.
 * @param {number} [flipVertical=0] Flips the image vertically. 0 for no flip, 1 for flip.
 * @returns {HTMLCanvasElement} A new canvas element with the edited image.
 */
function processImage(
    originalImg,
    brightness = 0,
    contrast = 0,
    grayscale = 0,
    sepia = 0,
    invert = 0,
    blur = 0,
    rotate = 0,
    flipHorizontal = 0,
    flipVertical = 0
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // --- 1. Calculate new canvas dimensions to fit the rotated image ---
    const radians = (rotate * Math.PI) / 180;
    const cos = Math.cos(radians);
    const sin = Math.sin(radians);
    const newWidth = Math.abs(originalWidth * cos) + Math.abs(originalHeight * sin);
    const newHeight = Math.abs(originalWidth * sin) + Math.abs(originalHeight * cos);

    canvas.width = newWidth;
    canvas.height = newHeight;

    // --- 2. Build the CSS filter string ---
    const filters = [];
    // Brightness/Contrast: Map range -100 to 100 into 0% to 200%
    if (brightness !== 0) filters.push(`brightness(${brightness + 100}%)`);
    if (contrast !== 0) filters.push(`contrast(${contrast + 100}%)`);
    // Grayscale/Sepia/Invert: Map 0 or 1 into 0% or 100%
    if (grayscale > 0) filters.push(`grayscale(${grayscale * 100}%)`);
    if (sepia > 0) filters.push(`sepia(${sepia * 100}%)`);
    if (invert > 0) filters.push(`invert(${invert * 100}%)`);
    // Blur: Value is in pixels
    if (blur > 0) filters.push(`blur(${blur}px)`);

    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

    // --- 3. Apply transformations and draw the image ---
    // Move the origin to the center of the new canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // Apply rotation
    if (rotate !== 0) {
        ctx.rotate(radians);
    }

    // Apply flips
    ctx.scale(flipHorizontal ? -1 : 1, flipVertical ? -1 : 1);

    // Draw the image centered around the new rotated/flipped origin
    ctx.drawImage(originalImg, -originalWidth / 2, -originalHeight / 2, originalWidth, originalHeight);

    return canvas;
}