Image Resizer

/**
 * Resizes an image to specified dimensions using a canvas.
 *
 * @param {HTMLImageElement} originalImg The original image element to resize.
 * @param {number} [width=0] - The target width in pixels. If set to 0, it's calculated based on the `height` to maintain the aspect ratio. If both `width` and `height` are 0, the original dimensions are used.
 * @param {number} [height=0] - The target height in pixels. If set to 0, it's calculated based on the `width` to maintain the aspect ratio. If both `width` and `height` are 0, the original dimensions are used.
 * @returns {HTMLCanvasElement} A new canvas element containing the resized image.
 */
function processImage(originalImg, width = 0, height = 0) {
    const originalWidth = originalImg.naturalWidth || originalImg.width;
    const originalHeight = originalImg.naturalHeight || originalImg.height;

    let newWidth = width;
    let newHeight = height;

    // If both width and height are 0 or negative, use original dimensions
    if (newWidth <= 0 && newHeight <= 0) {
        newWidth = originalWidth;
        newHeight = originalHeight;
    }
    // If only width is specified, calculate height to maintain aspect ratio
    else if (newWidth > 0 && newHeight <= 0) {
        const aspectRatio = originalHeight / originalWidth;
        newHeight = Math.round(newWidth * aspectRatio);
    }
    // If only height is specified, calculate width to maintain aspect ratio
    else if (newHeight > 0 && newWidth <= 0) {
        const aspectRatio = originalWidth / originalHeight;
        newWidth = Math.round(newHeight * aspectRatio);
    }
    // If both are specified, the image will be stretched to fit.

    // Ensure final dimensions are at least 1px
    newWidth = Math.max(1, Math.round(newWidth));
    newHeight = Math.max(1, Math.round(newHeight));

    // Create a canvas
    const canvas = document.createElement('canvas');
    canvas.width = newWidth;
    canvas.height = newHeight;

    // Get context and draw the resized image
    const ctx = canvas.getContext('2d');

    // Set a high quality for image smoothing
    ctx.imageSmoothingQuality = 'high';

    ctx.drawImage(originalImg, 0, 0, newWidth, newHeight);

    return canvas;
}