Why are images resized before uploading to the server?
Uploading a large file on the server takes a lot of time. So, it's advisable to first resize the images on the browser and then upload them. It reduces the upload time and improves the application performance of the website.
Imagine an image editor with the feature to resize, crop, rotate, zoom in and zoom out the image, but it often requires image manipulation at the client side.
But while editing the image, efficiency and speed are important for the user in these editors.
After the image manipulation is done, it takes quite a time to download transformed images from the server.
What is <canvas> tag?
This method is supported by mostly all the browsers like Google chrome, safari, Microsoft Edge/Internet Explorer, Oracle, Firefox etc.
The <canvas> tag usually draws a rectangular area on an HTML page. By default, a <canvas> element provides no border and no content.
<canvas id= “nameofId” width= “value" height= "value"></canvas>
The drawImage function is used along with “src” attributes on the images. This function allows us to render and scale images on the canvas element.
drawImage(image, x, y, width, height)
Here, the “image” is created using <img> element tag alomg with the image() constructor.
Here, the following example demonstrates how to resize an image(uploaded by the user) to the dimensions of 400X350.
After uploading the following image from the local device,
Now the screen looks like this,