Image Preview With Color Inversion And Flipping Adjustments Tool

/**
 * Previews an image with optional color inversion and flipping adjustments.
 * This function takes an image and applies horizontal flipping, vertical flipping,
 * and color inversion based on the provided parameters.
 *
 * @param {HTMLImageElement} originalImg - The original image object to process.
 * @param {string} flipHorizontal - A string ('true' or 'false') to indicate if the image should be flipped horizontally. Defaults to 'false'.
 * @param {string} flipVertical - A string ('true' or 'false') to indicate if the image should be flipped vertically. Defaults to 'false'.
 * @param {string} invertColors - A string ('true' or 'false') to indicate if the image colors should be inverted. Defaults to 'false'.
 * @returns {HTMLCanvasElement} A new canvas element displaying the processed image.
 */
function processImage(originalImg, flipHorizontal = 'false', flipVertical = 'false', invertColors = 'false') {
    // Create a new canvas element in memory
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height to get the original image size, falling back to width/height
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Parse the string parameters into boolean values for easier conditional logic
    const doFlipHorizontal = String(flipHorizontal).toLowerCase() === 'true';
    const doFlipVertical = String(flipVertical).toLowerCase() === 'true';
    const doInvertColors = String(invertColors).toLowerCase() === 'true';

    // Save the default state of the canvas context (e.g., transformations, styles)
    ctx.save();

    // --- Apply flipping transformations ---
    const scaleH = doFlipHorizontal ? -1 : 1; // -1 to flip, 1 to keep as is
    const scaleV = doFlipVertical ? -1 : 1;
    const translateX = doFlipHorizontal ? width : 0;  // Translate to the right edge if flipping horizontally
    const translateY = doFlipVertical ? height : 0; // Translate to the bottom edge if flipping vertically

    // Translate the canvas origin to the correct corner before scaling
    ctx.translate(translateX, translateY);
    ctx.scale(scaleH, scaleV);

    // Draw the image onto the transformed canvas.
    // The image is drawn at (0,0) relative to the new, transformed origin.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Restore the context to its original state (removes all transformations).
    // This is crucial so that subsequent operations like getImageData work on the untransformed canvas coordinates.
    ctx.restore();

    // --- Apply color inversion ---
    if (doInvertColors) {
        // Get the pixel data for the entire canvas
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data; // This is a Uint8ClampedArray

        // Iterate through every pixel. Each pixel is represented by 4 array elements (R, G, B, A).
        for (let i = 0; i < data.length; i += 4) {
            // Invert the Red, Green, and Blue channels by subtracting them from the max value (255)
            data[i] = 255 - data[i];       // Red channel
            data[i + 1] = 255 - data[i + 1]; // Green channel
            data[i + 2] = 255 - data[i + 2]; // Blue channel
            // The Alpha channel (data[i + 3]) is left untouched to preserve transparency
        }

        // Write the modified pixel data back to the canvas
        ctx.putImageData(imageData, 0, 0);
    }

    // Return the final canvas element, which can be appended to the DOM
    return canvas;
}