Image Thumbnail Creator

function processImage(originalImg, maxWidth = 100, maxHeight = 100) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height if available (for <img> elements from DOM), 
    // otherwise width/height (for Image objects created via new Image()).
    // These properties reflect the intrinsic dimensions of the image.
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // Handle invalid image dimensions (e.g., image not loaded yet, corrupt, or 0x0).
    if (originalWidth <= 0 || originalHeight <= 0) {
        canvas.width = 0;
        canvas.height = 0;
        // Users of this function can check canvas.width and canvas.height.
        // console.warn("Image Thumbnail Creator: Original image has invalid or zero dimensions.");
        return canvas; // Return an empty (0x0) canvas.
    }

    // Ensure maxWidth and maxHeight are numbers and positive.
    // The function parameters can be strings (e.g., from user input), so convert them.
    let numMaxWidth = Number(maxWidth);
    let numMaxHeight = Number(maxHeight);

    // Fallback to default values if parsing failed (NaN) or if values are non-positive.
    if (isNaN(numMaxWidth) || numMaxWidth <= 0) {
        numMaxWidth = 100; // Default maximum width for the thumbnail.
    }
    if (isNaN(numMaxHeight) || numMaxHeight <= 0) {
        numMaxHeight = 100; // Default maximum height for the thumbnail.
    }

    // Calculate the scaling factor to fit the image within numMaxWidth and numMaxHeight
    // while maintaining its original aspect ratio.
    // The scaleFactor will be less than or equal to 1.0, ensuring that the image is
    // not scaled up if it's already smaller than the specified maximum dimensions.
    const scaleFactor = Math.min(1, numMaxWidth / originalWidth, numMaxHeight / originalHeight);

    // Calculate the new dimensions for the thumbnail, rounding to the nearest whole pixel.
    let finalWidth = Math.round(originalWidth * scaleFactor);
    let finalHeight = Math.round(originalHeight * scaleFactor);

    // Ensure that dimensions are at least 1px if they were originally positive.
    // This prevents creating a 0-width or 0-height canvas which might result from
    // extreme downscaling of very thin/flat images combined with rounding.
    // For example, scaling a 2000x1 image to fit 10x10:
    // newWidth = 10, newHeight = 1 * (10/2000) = 0.005, rounds to 0.
    // This safeguard makes it 10x1 instead of 10x0.
    if (originalWidth > 0 && finalWidth <= 0) {
        finalWidth = 1;
    }
    if (originalHeight > 0 && finalHeight <= 0) {
        finalHeight = 1;
    }
    
    canvas.width = finalWidth;
    canvas.height = finalHeight;

    // Draw the scaled image onto the canvas.
    // Modern browsers typically handle image smoothing well during downscaling.
    // For very high quality, one might consider multi-step downscaling,
    // but for typical thumbnails, direct drawImage is usually sufficient.
    if (finalWidth > 0 && finalHeight > 0) { // Only draw if canvas has valid area
        ctx.drawImage(originalImg, 0, 0, finalWidth, finalHeight);
    }

    return canvas;
}