Please bookmark this page to avoid losing your image tool!

Image Aspect Ratio Stretch Tool

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, targetAspectRatio = "16:9", maintainDimension = "width") {
    // Determine the desired aspect ratio (width / height)
    let ratio = 16 / 9;
    
    if (typeof targetAspectRatio === 'string' && targetAspectRatio.includes(':')) {
        const parts = targetAspectRatio.split(':');
        const w = parseFloat(parts[0]);
        const h = parseFloat(parts[1]);
        if (h !== 0 && !isNaN(w) && !isNaN(h)) {
            ratio = w / h;
        }
    } else {
        const parsed = parseFloat(targetAspectRatio);
        if (!isNaN(parsed) && parsed > 0) {
            ratio = parsed;
        }
    }

    const originalWidth = originalImg.width || originalImg.naturalWidth;
    const originalHeight = originalImg.height || originalImg.naturalHeight;
    let newWidth, newHeight;

    // Calculate new dimensions based on which dimension to maintain
    if (maintainDimension === 'height') {
        newHeight = originalHeight;
        newWidth = newHeight * ratio;
    } else if (maintainDimension === 'area') {
        const area = originalWidth * originalHeight;
        newHeight = Math.sqrt(area / ratio);
        newWidth = newHeight * ratio;
    } else {
        // Default to keeping the original width constant
        newWidth = originalWidth;
        newHeight = newWidth / ratio;
    }

    // Create the canvas
    const canvas = document.createElement('canvas');
    // Ensure dimensions are at least 1x1 pixels to avoid canvas errors
    canvas.width = Math.max(1, Math.round(newWidth));
    canvas.height = Math.max(1, Math.round(newHeight));
    
    const ctx = canvas.getContext('2d');
    
    // Draw and stretch the image to fit the new canvas exactly
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    return canvas;
}

Free Image Tool Creator

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

Create a custom image tool

Description

The Image Aspect Ratio Stretch Tool allows users to modify an image’s dimensions to match a specific aspect ratio. Users can define a custom ratio (such as 16:9 or 4:3) and choose whether to maintain the original width, original height, or the total image area during the transformation. The tool stretches the image content to exactly fit the new proportions, making it useful for preparing images for specific display formats, social media templates, or digital signage where a precise aspect ratio is required.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: