Image Resizer By Percentage

function processImage(originalImg, percentage = 50) {
    // Use naturalWidth/Height for intrinsic dimensions of the image.
    // Fallback to width/height if naturalWidth/Height are not available (e.g., for some SVG or non-loaded images).
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero (e.g., image not loaded or invalid),
    // return a 1x1 pixel canvas as a fallback. This meets the requirement
    // of returning a canvas.
    if (originalWidth === 0 || originalHeight === 0) {
        const canvas = document.createElement('canvas');
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    let numPercentage = Number(percentage);

    // Validate the percentage.
    // The default value of 50 (from function signature) is used if `percentage` argument is not provided.
    // If an invalid value (e.g., "abc", 0, negative number) is explicitly provided,
    // we fall back to 1% scaling. This ensures the output is still a proportionally scaled image,
    // albeit very small, and dimensions remain positive.
    if (isNaN(numPercentage) || numPercentage <= 0) {
        numPercentage = 1; // Fallback to 1% if percentage is invalid or not positive
    }

    const scaleFactor = numPercentage / 100;
    
    // Calculate new dimensions, rounded to the nearest whole pixel.
    const newWidth = Math.round(originalWidth * scaleFactor);
    const newHeight = Math.round(originalHeight * scaleFactor);

    // Ensure final dimensions are at least 1x1 pixel to prevent errors with canvas.
    const finalWidth = Math.max(1, newWidth);
    const finalHeight = Math.max(1, newHeight);

    const canvas = document.createElement('canvas');
    canvas.width = finalWidth;
    canvas.height = finalHeight;

    const ctx = canvas.getContext('2d');
    
    // Enable image smoothing for better quality when resizing.
    // These properties might not be supported in all browsers or may have prefixes
    // in older versions, but this covers modern standard implementations.
    if (typeof ctx.imageSmoothingEnabled === 'boolean') {
      ctx.imageSmoothingEnabled = true;
    }
    if (typeof ctx.imageSmoothingQuality === 'string') {
      // Common values: 'low', 'medium', 'high'. 'high' is preferred for best quality.
      ctx.imageSmoothingQuality = 'high';
    }
    
    // Draw the original image onto the canvas, scaled to the new dimensions.
    ctx.drawImage(originalImg, 0, 0, finalWidth, finalHeight);

    return canvas;
}