Zoom uploaded image on input range in ASP.NET Webforms-CodePudding

I have a problem with zooming an uploaded image in ASP.NET Webforms. In my project I need to upload an image, preview it and be able to zoom it on input range. Here is my code, but it won't work. It says it can't read values from null. Also I will need the values, because the zoomed image needs to be written in database. Does anyone have a clue how can I solve it? Thanks in advance.

   <script type="text/javascript">
    function ShowImagePreview(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#<%=imagePreview.ClientID%>').prop('src', e.target.result)
                    .width(240)
                    .height(150);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    var zoomer = document.getElementById('zoomer');
    var imagePreview = document.getElementById('imagePreview');

    function deepdive(){ 
       zoomlevel = zoomer.valueAsNumber;
       imagePreview.style.webkitTransform = "scale(" zoomlevel ")";
       imagePreview.style.transform = "scale(" zoomlevel ")";
    }
</script>

<asp:FileUpload ID="uploadImage" runat="server" onchange="ShowImagePreview(this)"
<div >
   <asp:Image ID="imagePreview" Height="250px" Width="250px" runat="server"/>
</div>
<input id="zoomer" type="range" min="1" max="100" value="1"  oninput="deepdive()" >

and in my css

#imageContainer {
  width: 50%;
  font-size: 0;
  border: 1px solid #111;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 2rem;
}

#imagePreview {
  width: 100%;
}

#zoomer {
  display: block;
  width: 50%;
  margin: 2rem auto;
}

CodePudding user response：

I solved the problem was in the tag asp:Image, instead of that it works with a simple img tag.