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

时间:2014-04-02 00:09:29

标签: c# javascript asp.net

我在JavaScript应用中加载了一个Image变量,我希望将其传递给C#应用中的ASP.NET方法(因此我可以将其存储在数据库中) 。我唯一的问题是将图像的数据本身转换为C#方法。我尝试使用AJAX调用(GET)并将C#方法的byte[]参数设置为图片的.Picture,但byte[]是空。

如何将图像的数据从JavaScript脚本转换为C#方法?

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

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

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

1 个答案:

答案 0 :(得分:2)

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