Image Resizer Tool

function processImage(originalImg, newWidth = 0, newHeight = 0) {
    const ow = originalImg.width;
    const oh = originalImg.height;

    let targetWidth;
    let targetHeight;

    // Convert parameters to numbers. Invalid string inputs (e.g., "abc") will become NaN.
    const numParamWidth = Number(newWidth);
    const numParamHeight = Number(newHeight);

    // Determine target dimensions based on input parameters
    if (numParamWidth > 0 && numParamHeight > 0) {
        // Case 1: Both width and height are specified with positive numbers.
        // Resize to exact dimensions, potentially changing aspect ratio.
        targetWidth = numParamWidth;
        targetHeight = numParamHeight;
    } else if (numParamWidth > 0) {
        // Case 2: Only width is specified with a positive number.
        // Scale height proportionally. numParamHeight is <= 0 or NaN.
        targetWidth = numParamWidth;
        if (ow > 0 && oh > 0) {
            // Calculate height to maintain aspect ratio.
            targetHeight = oh * (numParamWidth / ow);
        } else {
            // Original image has zero width or height, so aspect ratio is undefined or zero.
            // Preserve original height (could be 0).
            targetHeight = oh;
        }
    } else if (numParamHeight > 0) {
        // Case 3: Only height is specified with a positive number.
        // Scale width proportionally. numParamWidth is <= 0 or NaN.
        targetHeight = numParamHeight;
        if (ow > 0 && oh > 0) {
            // Calculate width to maintain aspect ratio.
            targetWidth = ow * (numParamHeight / oh);
        } else {
            // Original image has zero width or height, so aspect ratio is undefined or zero.
            // Preserve original width (could be 0).
            targetWidth = ow;
        }
    } else {
        // Case 4: Neither width nor height is specified with a positive number.
        // This includes (0,0), (negative, positive), (NaN, positive), (positive, NaN), (NaN,NaN), etc.
        // Default to original image dimensions.
        targetWidth = ow;
        targetHeight = oh;
    }

    // Sanitize calculated dimensions:
    // Round to nearest integer.
    targetWidth = Math.round(targetWidth);
    targetHeight = Math.round(targetHeight);

    // Ensure dimensions are not negative.
    targetWidth = Math.max(0, targetWidth);
    targetHeight = Math.max(0, targetHeight);
    
    // Create a new canvas element.
    const canvas = document.createElement('canvas');
    canvas.width = targetWidth;
    canvas.height = targetHeight;

    // Draw the image onto the canvas if dimensions are valid.
    // An image with 0 width or height cannot be drawn by .drawImage().
    // A canvas with 0 width or height means there's nothing to draw on.
    if (ow > 0 && oh > 0 && targetWidth > 0 && targetHeight > 0) {
        const ctx = canvas.getContext('2d');

        // Set image smoothing for better quality, if supported.
        // imageSmoothingEnabled is true by default in modern browsers.
        // imageSmoothingQuality provides finer control.
        if (typeof ctx.imageSmoothingQuality !== 'undefined') {
            ctx.imageSmoothingQuality = 'high';
        }
        // For older browsers, you might need prefixed versions or just rely on default.
        // e.g. ctx.mozImageSmoothingEnabled, ctx.webkitImageSmoothingEnabled etc.
        // But the guideline prefers standard Web APIs if possible.

        ctx.drawImage(originalImg, 0, 0, targetWidth, targetHeight);
    }
    // If original image dimensions are zero, or target dimensions are zero,
    // a blank canvas of the target size is returned.

    return canvas;
}