Image Utility Tool

/**
 * A generic image utility function that can apply various effects and transformations.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} operation The main operation to perform. Accepts 'copy', 'grayscale', 'invert', 'sepia'. Defaults to 'copy'.
 * @param {number} brightness The brightness adjustment. A value from -100 to 100. 0 means no change. Defaults to 0.
 * @param {number} contrast The contrast adjustment. A value from -100 to 100. 0 means no change. Defaults to 0.
 * @param {number} rotation The rotation angle in degrees. Can be any number. Defaults to 0.
 * @returns {HTMLCanvasElement} A canvas element with the processed image.
 */
function processImage(originalImg, operation = 'copy', brightness = 0, contrast = 0, rotation = 0) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Sanitize numeric inputs to ensure they are numbers
    const brightnessValue = Number(brightness) || 0;
    const contrastValue = Number(contrast) || 0;
    const rotationDegrees = Number(rotation) || 0;

    // Convert rotation degrees to radians for the Math functions
    const radians = rotationDegrees * Math.PI / 180;
    const cos = Math.cos(radians);
    const sin = Math.sin(radians);

    // Calculate the new canvas dimensions to fit the rotated image without clipping.
    // This is the bounding box of the rotated rectangle.
    const newWidth = Math.ceil(Math.abs(originalImg.width * cos) + Math.abs(originalImg.height * sin));
    const newHeight = Math.ceil(Math.abs(originalImg.width * sin) + Math.abs(originalImg.height * cos));

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

    // Build the filter string using the CSS filter syntax
    const filters = [];

    // Brightness: The filter value is a percentage. 100% is normal.
    // We map our -100 to 100 range to 0% to 200%.
    filters.push(`brightness(${100 + brightnessValue}%)`);

    // Contrast: The filter value is a percentage. 100% is normal.
    // We map our -100 to 100 range to 0% to 200%.
    filters.push(`contrast(${100 + contrastValue}%)`);

    // Apply main operation filters
    switch (String(operation).toLowerCase()) {
        case 'grayscale':
            filters.push('grayscale(100%)');
            break;
        case 'invert':
            filters.push('invert(100%)');
            break;
        case 'sepia':
            filters.push('sepia(100%)');
            break;
        // The 'copy' case is the default and adds no extra filter
        case 'copy':
        default:
            break;
    }

    // Apply the combined filter string to the canvas context
    ctx.filter = filters.join(' ');

    // To rotate the image, we first move the canvas's origin to the center,
    // then rotate, and finally draw the image centered on that new origin.
    ctx.save(); // Save the clean state of the context
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(radians);
    ctx.drawImage(originalImg, -originalImg.width / 2, -originalImg.height / 2);
    ctx.restore(); // Restore the context to its original state

    // Return the resulting canvas element
    return canvas;
}