Image Size Reducer

function processImage(originalImg, maxWidth = 800, maxHeight = 600) {
    // Step 1: Validate and parse parameters.
    // Ensure maxWidth and maxHeight are positive numbers.
    // If an invalid value (e.g., string, zero, negative) is provided for maxWidth or maxHeight,
    // it falls back to the function's defined default values (800 and 600).
    let numMaxWidth = Number(maxWidth);
    if (isNaN(numMaxWidth) || numMaxWidth <= 0) {
        numMaxWidth = 800; // Default width as per function signature
    }

    let numMaxHeight = Number(maxHeight);
    if (isNaN(numMaxHeight) || numMaxHeight <= 0) {
        numMaxHeight = 600; // Default height as per function signature
    }

    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;

    // Step 2: Handle images with zero dimensions.
    // If the original image has no width or height, return an empty 0x0 canvas.
    if (originalWidth === 0 || originalHeight === 0) {
        const canvas = document.createElement('canvas');
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    // Step 3: Calculate new dimensions while preserving aspect ratio.
    // The image will be scaled down to fit within numMaxWidth and numMaxHeight.
    // If the image is already smaller than these dimensions, its original dimensions are kept (it's not scaled up).
    let newWidth = originalWidth;
    let newHeight = originalHeight;
    const aspectRatio = originalWidth / originalHeight;

    // Check if scaling is needed based on width constraint
    if (newWidth > numMaxWidth) {
        newWidth = numMaxWidth;
        newHeight = newWidth / aspectRatio;
    }

    // Check if further scaling is needed based on height constraint (after potential width scaling)
    if (newHeight > numMaxHeight) {
        newHeight = numMaxHeight;
        newWidth = newHeight * aspectRatio;
    }

    // Round dimensions to the nearest whole pixel.
    newWidth = Math.round(newWidth);
    newHeight = Math.round(newHeight);

    // Step 4: Create a new canvas and draw the scaled image onto it.
    const canvas = document.createElement('canvas');
    canvas.width = newWidth;
    canvas.height = newHeight;

    const ctx = canvas.getContext('2d');
    
    // Modern browsers often have imageSmoothingEnabled=true by default, which uses bilinear interpolation.
    // For potentially higher quality downscaling, imageSmoothingQuality can be set.
    // However, support and behavior can vary. Default is usually fine for general purposes.
    // if (ctx.imageSmoothingQuality) { // Check if supported
    //   ctx.imageSmoothingQuality = 'high';
    // }
    
    ctx.drawImage(originalImg, 0, 0, newWidth, newHeight);

    // Step 5: Return the canvas element.
    // The caller can subsequently convert the canvas to a Blob or Data URL (e.g., for download or display),
    // specifying image_format and quality if desired (e.g., canvas.toDataURL('image/jpeg', 0.8)).
    return canvas;
}