There are several ways to change the size of an image in JavaScript. One way is to use the .style property to set the width and height properties of the image element. For example:

var img = document.getElementById("myImg");
img.style.width = "300px";
img.style.height = "200px";

Another way is to use the .setAttribute() method to set the width and height attributes of the image element. For example:

var img = document.getElementById("myImg");
img.setAttribute("width", "300");
img.setAttribute("height", "200");

You can also use CSS to change the size of an image.

#myImg{
   width: 300px;
   height: 200px;
}
<img id="myImg" src="image.jpg" alt="image">

It’s also possible to use canvas to change the size of an image.

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImg");
canvas.width = 300;
canvas.height = 200;
ctx.drawImage(img, 0, 0, 300, 200);

Keep in mind that changing the size of an image can affect the aspect ratio and image quality.

Also Read:

Categorized in:

JavaScript

Tagged in:

,