在 ASP.NET 应用中将图像从 JavaScript 传递到 C#

本文关键字：JavaScript 图像 NET ASP 应用 | 更新日期: 2023-09-27 17:56:08

我在JavaScript应用程序中加载了一个图像变量，我想将其传递给ASP.NET应用程序中的C#方法（以便我可以将其存储在数据库中）。 我遇到的唯一问题是将图像的数据本身获取到C#方法。 我尝试使用AJAX调用（这是一个GET），并将C#方法的byte[]参数设置为图像的.图片，但byte[]是空的。

如何将图像的数据从 JavaScript 脚本获取到 C# 方法？

更新：我尝试在画布的呈现上下文中使用 drawImage 将图像复制到画布，但图像必须来自我的本地计算机，因此当我随后尝试调用 canvas.toDataURL 时，它会引发 DOM 安全错误。

我还考虑过使用 FileReader 直接获取数据，而不是将其作为图像加载，但是出于政治原因，我必须支持尚未实现 FileReader 的浏览器。

我是否要求一些在 JavaScript 中不可能实现的东西？ （必须有一种方法可以做到这一点（不一定在JS中），因为Facebook实现了从客户端计算机的本地文件系统加载图像。

在 ASP.NET 应用中将图像从 JavaScript 传递到 C#

我不知道

您如何在javascript应用程序中加载图像。但是当我遇到同样的问题时，我以以下方式做了。

.HTML

  <input id="imgInput" type="file"  name="file" />
  <img id="imagePreview" src="" alt="Item Image" width="96" height="80"/>
  <input id="Button1" type="button" value="save image"  onclick="saveimage();"/>

.JS

 $(document).ready(function () {
            $("#imgInput").change(function () {
                readURL(this);
            });
        });
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#imagePreview').attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        function saveimage() {
            var images = $('#imagePreview').attr('src');
            var ImageSave = images.replace("data:image/jpeg;base64,", "");
            var submitval = JSON.stringify({ data: ImageSave });
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",
                datatype: "json",
                data: submitval,
                url: "your url",
                success: function (data) {
                     //code for success
                }
            });
        }

。.CS

[WebMethod]
    public static string saveimage(string data) {
        byte[] imgarr = Convert.FromBase64String(data);
         /* Add further code here*/
    }
相关文章：