c# - 在 ASP.NET 应用程序中将图像从 JavaScript 传递到 C#？

Question

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

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

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

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

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

Answer 1

我不知道您如何在 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*/
    }