Image Software Utility

/**
 * Applies various software-like filters and effects to an image.
 * This function acts as a versatile image processing utility, interpreting "Software"
 * as a collection of different image manipulation tools.
 *
 * @param {Image} originalImg The original source image object.
 * @param {string} effect The name of the effect to apply. Available effects are:
 *                        'grayscale', 'sepia', 'invert', 'brightness', 'contrast',
 *                        'blur', 'pixelate', 'glitch'. Defaults to 'pixelate'.
 * @param {number} intensity The strength or level of the effect. If not provided, a
 *                           sensible default is used for each effect.
 *                           - grayscale, sepia, invert: Percentage (0-100). Default: 100.
 *                           - brightness, contrast: Percentage (e.g., 100 is normal). Default: 150.
 *                           - blur: Blur radius in pixels. Default: 5.
 *                           - pixelate: The size of the square pixels. Default: 10.
 *                           - glitch: The maximum horizontal displacement. Default: 20.
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
async function processImage(originalImg, effect = 'pixelate', intensity) {
    // Create a canvas element and get its 2D context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Sanitize the effect name
    const effectName = typeof effect === 'string' ? effect.toLowerCase().trim() : 'none';

    // Apply the selected effect
    switch (effectName) {
        case 'grayscale':
        case 'sepia':
        case 'invert':
            {
                const level = intensity === undefined ? 100 : intensity;
                ctx.filter = `${effectName}(${Math.max(0, Math.min(100, level))}%)`;
                ctx.drawImage(originalImg, 0, 0);
                break;
            }

        case 'brightness':
        case 'contrast':
            {
                const level = intensity === undefined ? 150 : intensity;
                ctx.filter = `${effectName}(${Math.max(0, level)}%)`;
                ctx.drawImage(originalImg, 0, 0);
                break;
            }

        case 'blur':
            {
                const radius = intensity === undefined ? 5 : intensity;
                ctx.filter = `blur(${Math.max(0, radius)}px)`;
                ctx.drawImage(originalImg, 0, 0);
                break;
            }

        case 'pixelate':
            {
                // For pixelation, we don't use filters. We maniuplate the canvas directly.
                const pixelSize = Math.max(1, Math.round(intensity === undefined ? 10 : intensity));
                
                // Draw the original image scaled down, with pixelated scaling, then scale it back up.
                // This is a fast and effective way to achieve pixelation.
                ctx.imageSmoothingEnabled = false;
                ctx.drawImage(originalImg, 0, 0, canvas.width / pixelSize, canvas.height / pixelSize);
                ctx.drawImage(canvas, 0, 0, canvas.width / pixelSize, canvas.height / pixelSize, 0, 0, canvas.width, canvas.height);
                ctx.imageSmoothingEnabled = true;

                break;
            }

        case 'glitch':
            {
                ctx.drawImage(originalImg, 0, 0);
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const glitchAmount = Math.max(1, intensity === undefined ? 20 : intensity);

                // Apply several horizontal glitch slices
                for (let i = 0; i < 10; i++) {
                    const y = Math.random() * canvas.height;
                    const h = Math.random() * 20 + 5; // Slice height
                    const xOffset = (Math.random() - 0.5) * glitchAmount;
                    const slice = ctx.getImageData(0, y, canvas.width, h);
                    ctx.putImageData(slice, xOffset, y);
                }
                break;
            }

        default:
            // If no effect is matched, or effect is 'none', just draw the original image
            ctx.drawImage(originalImg, 0, 0);
            break;
    }

    // Reset filter for any future operations on this context if it's reused
    ctx.filter = 'none';

    return canvas;
}