Image Resizer Online

Online Free Image Resizer quickly helps resize any type of image in seconds. Without worrying about data leakage you can use Atrowel Image resizer. It will not send any data to the server or not store it locally. Browse or drag and drop an image from your device, and enter the expected new width and height.

Social media post image dimensions

The below specs refer to the social media post images. All platforms support different dimension, to optimized view we need to upload image with their given best dimension. Following chart will help you to find out best dimention.

How to Resize the Image using JavaScript?

With the help of HTML Canvas element drawImage() method we can resize images in different shapes. Let’s create a canvas element in the html page.

<canvas id="canvas"></canvas>

Read the uploaded image and create an img component using the Image() constructor.

var image = new Image();
image.src = URL.createObjectURL(uploadFile);

Draw an image on canvas with expected width and height.

/* Get Canvas */
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.canvas.height = image.height;
ctx.canvas.width  = image.width;

/* Resize image with new width and new height */
ctx.drawImage(this.imageObj, 0, 0, newWidth, newHeight);

Credits

HTML Canvas element - is used to draw graphs on a website.

ReactJs - A JavaScript library for building user interfaces.