i have a js function that previews the image on button click before uploading. I want to add the functionality of zoom in and zoom out to that preview. How can I do that? Following is the code I am using:

<tr>
              <th><label style="display: inline;" for="id_image">Image:</label></th>
              <td>
                
                <input type="file" name="image" accept="image/*" id="id_image"  onchange="showPreview(event)" {{form.image}}
                    
              </td>
            </tr>

And function to preview before uploading:

<script>
        

        function showPreview(event){

            if(event.target.files.length > 0){
                var src = URL.createObjectURL(event.target.files[0]);
                var preview = document.getElementById("file-ip-1-preview");
                preview.src = src;
                preview.style.display = "block";
                                            }                              
                                         }                                    
    </script>  

Ad here is the working zoom function that I want to incorporate in the preview function.

    {% comment %} ZOOM IMAGE with + and - Buttons {% endcomment %}
<script>

  function zoomin(){
    
    var myImg = document.getElementById("map");
    var currWidth = myImg.clientWidth;
    if(currWidth == 2500) return false;
     else{
        myImg.style.width = (currWidth + 100) + "px";
    } 
}
  function zoomout(){
    
    var myImg = document.getElementById("map");
    var currWidth = myImg.clientWidth;
    if(currWidth == 100) return false;
      else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

</script>

<div id="navbar">
  <button type="button" onclick="zoomin()"> <h6>+</h6> </button>
  <button type="button" onclick="zoomout()"> <h6>--</h6> </button>
  </div>
  
  <div class="main">
  <img id="map" src="IMAGE SOURCE HERE" />