Change the size of an image using JavaScript

In this article, I will tell you how to change the size of an image using JavaScript. If we want to change the size of an image, then we will use the function in JavaScript. first of all, we give the path of image and use two buttons namely zoom in and zoom out in HTML body tag. Finally, in the header section, we will use “On clicking” function for changing an image size.

Functions that we are using to change image size in JavaScript

On-click is a JavaScript function that is used for changing the size of an image. One more way is to use click() function, which is an HTML function. In both cases, we are using functions.

We have created two functions zoomin() and zoomout(). These will be used.

Now, let’s see how it happens..

Here, I have taken an example of a cake image

In the HTML body section:

  • first, we added an image of a cake.
<img src="https://images.unsplash.com/photo-1562804698-732e972e46e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1887&q=80" id="cake" width="250">

whereas,

id=Unique identifier for that image file, which we will be referring to access that,

width=Default width set for that image as 250

  • ¬†Now, We have added two buttons in the web page for zooming the image IN and OUT.
<button type="button" onclick="zoomin()">Zoom In</button>
<button type="button" onclick="zoomout()">Zoom Out</button>

On clicking the button “Zoom In” a JavaScript function “zoom_in()” will be called and executed.

similarly, for “Zoom Out” function.

In the HTML header section, we are defining a script

We have added a function called zoom_in().

function zoomin()

then, initialize a variable called my_Image  and linked that image file.

Now fetching the current width of that image with the property called client_Width and saving in the variable cur_Width.

Finally, we are setting the width of that image file to cur_Width+50, this will increase the current width by 50 pixels.

similarly, for zoom_out() function.

  •   function zoomin() {
               var myImage=document.getElement("cake");
               var curWidth =myImage.clientWidth;
               myImage.style.width=(curWidth + 50)+"pixel";
               } 
      function zoomout() {
               var myImage=document.getElementById("cake");
               var curWidth =myImage.clientWidth;
               myImage.style.width=(cur_Width + 50)+"pixel";
               } 
    

    thus, our entire code:

  • <html>
        <body>
             <img src="https://images.unsplash.com/photo-1562804698-732e972e46e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1887&q=80" id="cake" width="250">
             <button type="button" onclick="zoomin()">Zoom In</button> 
             <button type="button" onclick="zoomout()">Zoom Out</button>
        </body>
        <section>
        <script> 
        function zoomin() {
           var myImage=document.getElement("cake"); 
           var curWidth =myImage.clientWidth;
           myImage.style.width=(curWidth + 50)+"pixel"; 
           } 
        function zoomout() {
           var myImage=document.getElement("cake"); 
           var curWidth =my-Image.clientWidth; 
           myImage.style.width=(curWidth + 50)+"pixel"; 
           }
        </script>
        </section> 
    </html>

YOU CAN ALSO READ:

An introduction to Javascript Functions

How to Resize an Image using Seam Carving Algorithm and Streamlit in Python

Leave a Reply

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