Tengo una función js que muestra una vista previa de la imagen al hacer clic en el botón antes de cargarla. Quiero agregar la funcionalidad de acercar y alejar esa vista previa. ¿Cómo puedo hacer eso? El siguiente es el código que estoy usando:

 <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>

Y función para obtener una vista previa antes de cargar:

 <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>

El anuncio aquí es la función de zoom de trabajo que quiero incorporar en la función de vista previa.

 {% 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" />