在 ASP.NET Webforms 的输入范围内缩放上传的图像

Question

我在 ASP.NET Webforms 中缩放上传的图像时遇到问题。 在我的项目中，我需要上传一张图片，预览它并能够在输入范围内进行缩放。 这是我的代码，但它不起作用。 它说它无法从 null 读取值。 我还需要这些值，因为缩放后的图像需要写入数据库。 有谁知道我该如何解决？ 提前致谢。

   <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 class="imageContainer">
   <asp:Image ID="imagePreview" Height="250px" Width="250px" runat="server"/>
</div>
<input id="zoomer" type="range" min="1" max="100" value="1" class="sliderZoom" oninput="deepdive()" >

在我的 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;
}

Answer 1

我解决了问题是在标签 asp:Image 中，而不是它与一个简单的 img 标签一起工作。