Image Preview With Color Inversion And Semitone Adjustment

/**
 * Previews an image with optional transformations like color inversion, 
 * semitone adjustment (hue rotation), flipping, and resizing.
 * The description provided seems to be a collection of keywords; this function 
 * implements the clear image processing tasks mentioned: flipping, color inversion,
 * and a "semitone" adjustment, which is interpreted as a hue rotation.
 *
 * @param {Image} originalImg The source HTML Image object.
 * @param {number} invert Whether to invert the colors. 1 for true, 0 for false. Defaults to 0.
 * @param {number} semitones The number of semitones to adjust the hue by. One semitone is interpreted as a 30-degree rotation on the color wheel (1/12th of 360 degrees). Can be positive or negative. Defaults to 0.
 * @param {number} flipHorizontal Whether to flip the image horizontally. 1 for true, 0 for false. Defaults to 0.
 * @param {number} flipVertical Whether to flip the image vertically. 1 for true, 0 for false. Defaults to 0.
 * @param {number} maxSize The maximum size (width or height) for the output image, preserving the aspect ratio. Defaults to 1280.
 * @returns {HTMLCanvasElement} A canvas element displaying the processed image.
 */
function processImage(originalImg, invert = 0, semitones = 0, flipHorizontal = 0, flipVertical = 0, maxSize = 1280) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate new dimensions to fit within maxSize while preserving aspect ratio
    let width = originalImg.width;
    let height = originalImg.height;

    if (width > height) {
        if (width > maxSize) {
            height = Math.round(height * (maxSize / width));
            width = maxSize;
        }
    } else {
        if (height > maxSize) {
            width = Math.round(width * (maxSize / height));
            height = maxSize;
        }
    }

    canvas.width = width;
    canvas.height = height;

    // Save the clean context state
    ctx.save();

    // Apply flip transformations if requested
    // The order of translate and scale is crucial for correct flipping.
    const scaleH = flipHorizontal ? -1 : 1;
    const scaleV = flipVertical ? -1 : 1;
    const translateX = flipHorizontal ? canvas.width : 0;
    const translateY = flipVertical ? canvas.height : 0;

    ctx.translate(translateX, translateY);
    ctx.scale(scaleH, scaleV);

    // Build the filter string for color adjustments
    const filters = [];

    if (invert) {
        filters.push('invert(1)');
    }

    if (semitones !== 0) {
        // A "semitone" is a musical interval. In a visual context, we can map this
        // to a 1/12th division of the color wheel (360 degrees).
        // So, 1 semitone = 30 degrees of hue rotation.
        const hueAngle = semitones * 30;
        filters.push(`hue-rotate(${hueAngle}deg)`);
    }

    // Apply the combined filter string to the context
    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

    // Draw the original image onto the transformed and filtered context
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Restore the context to its original state (removes transforms and filters)
    ctx.restore();

    return canvas;
}