Please bookmark this page to avoid losing your image tool!

Image Resizer Tool

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Resizer Tool allows users to easily resize images by specifying new dimensions. You can input either a new width, a new height, or both to adjust the size of your image without losing the original quality. This tool is useful for preparing images for various applications such as web uploads, social media sharing, or personal use, where specific image dimensions are often required. It also automatically maintains the aspect ratio when only one dimension is specified, ensuring your images remain proportionate.

Leave a Reply

Your email address will not be published. Required fields are marked *