Image Software Suite

/**
 * Applies a specified effect to an image, mimicking a basic image software suite.
 * The operation and its parameters are controlled by the arguments.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} [effect='none'] The name of the effect to apply. Case-insensitive.
 *   Possible values: 'none', 'grayscale', 'sepia', 'invert', 'brightness', 'contrast',
 *   'blur', 'saturate', 'hue-rotate', 'resize', 'crop', 'rotate'.
 * @param {number} [p1=100] Primary parameter for the effect. Its meaning varies:
 *   - Filters ('grayscale', 'sepia', etc.): Percentage of the effect. For brightness/contrast, 100 means no change.
 *   - 'blur': Blur radius in pixels.
 *   - 'hue-rotate', 'rotate': Angle in degrees.
 *   - 'resize': New width in pixels.
 *   - 'crop': X-coordinate of the top-left corner of the crop area.
 * @param {number} [p2=100] Secondary parameter.
 *   - 'resize': New height in pixels.
 *   - 'crop': Y-coordinate of the top-left corner of the crop area.
 * @param {number} [p3=100] Tertiary parameter.
 *   - 'crop': The width of the cropped area.
 * @param {number} [p4=100] Quaternary parameter.
 *   - 'crop': The height of the cropped area.
 * @returns {HTMLCanvasElement} A new canvas element containing the processed image.
 */
function processImage(originalImg, effect = 'none', p1 = 100, p2 = 100, p3 = 100, p4 = 100) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for the true image dimensions, unaffected by CSS styling.
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    const normalizedEffect = typeof effect === 'string' ? effect.toLowerCase() : 'none';

    switch (normalizedEffect) {
        // --- Transformation Effects ---

        case 'resize': {
            canvas.width = p1 > 0 ? p1 : imgWidth;
            canvas.height = p2 > 0 ? p2 : imgHeight;
            ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
            break;
        }

        case 'crop': {
            const x = Math.max(0, p1);
            const y = Math.max(0, p2);
            // Ensure crop dimensions don't exceed image boundaries from the starting point.
            const w = Math.max(0, Math.min(p3, imgWidth - x));
            const h = Math.max(0, Math.min(p4, imgHeight - y));

            if (w <= 0 || h <= 0) {
                // If crop dimensions are invalid, just copy the original image.
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                ctx.drawImage(originalImg, 0, 0);
            } else {
                canvas.width = w;
                canvas.height = h;
                ctx.drawImage(originalImg, x, y, w, h, 0, 0, w, h);
            }
            break;
        }

        case 'rotate': {
            const angleInRad = p1 * Math.PI / 180;
            const cos = Math.cos(angleInRad);
            const sin = Math.sin(angleInRad);
            
            // Calculate the new bounding box dimensions for the rotated image
            const newWidth = Math.round(Math.abs(imgWidth * cos) + Math.abs(imgHeight * sin));
            const newHeight = Math.round(Math.abs(imgWidth * sin) + Math.abs(imgHeight * cos));

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

            // Translate to the center, rotate, and draw the image back at the offset center
            ctx.translate(newWidth / 2, newHeight / 2);
            ctx.rotate(angleInRad);
            ctx.drawImage(originalImg, -imgWidth / 2, -imgHeight / 2);
            break;
        }

        // --- Filter Effects (using the Canvas `filter` property) ---

        case 'grayscale':
        case 'sepia':
        case 'invert':
        case 'saturate':
        case 'brightness':
        case 'contrast': {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            ctx.filter = `${normalizedEffect}(${p1}%)`;
            ctx.drawImage(originalImg, 0, 0);
            break;
        }
        
        case 'blur': {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            ctx.filter = `blur(${p1}px)`;
            ctx.drawImage(originalImg, 0, 0);
            break;
        }

        case 'hue-rotate': {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            ctx.filter = `hue-rotate(${p1}deg)`;
            ctx.drawImage(originalImg, 0, 0);
            break;
        }

        // --- Default Case (No effect) ---

        case 'none':
        default: {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            ctx.drawImage(originalImg, 0, 0);
            break;
        }
    }

    return canvas;
}