将画布图像保存到服务器 ASP.NET mvc答案

【问题标题】：Saving canvas image to server ASP.NET mvc将画布图像保存到服务器 ASP.NET mvc
【发布时间】：2017-12-27 11:18:54
【问题描述】：

我要做的是捕获图像，然后将其保存在服务器端。到目前为止，图像只保存在客户端。

<script>


    html2canvas(document.querySelector("body")).then(canvas => {
        var img = canvas.toDataURL("image/png")
        var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        ///location.href = img;



        $.ajax({
            type: 'POST',
            url: "UserHome/UploadImage",
            data: '{ "imageData" : "' + img + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });

</script>

用户主控制器：

static string path = @"E:\XXXXX\XXXXXXX\";

 [WebMethod()]
        public static void UploadImage(string imageData)
        {
            string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    byte[] data = Convert.FromBase64String(imageData);//convert from base64
                    bw.Write(data);
                    bw.Close();
                }
            }
        }

我已经关注了这个tute：http://www.dotnetfunda.com/articles/show/1662/saving-html-5-canvas-as-image-on-the-server-using-aspnet

为什么页面加载完成后不立即保存图像？虽然，如果我取消注释以下行并删除 ajax，它将在另一个选项卡中显示图像：

///location.href = img;

另外，我想知道即使浏览器最小化，是否可以截屏？或者有什么方法可以做到这一点？

更新：

所以我已经成功将截图保存到我的服务器端，但是问题仍然存在，我如何在浏览器最小化时截屏？我运行脚本并最小化浏览器，但它仍然捕获浏览器图像并将其保存到服务器文件夹。无论如何我现在可以在浏览器外捕获屏幕图像吗？

【问题讨论】：

看起来您在发送文件时遇到问题。尝试来自here 的回答。

标签： javascript jquery asp.net-mvc canvas

【解决方案1】：

本教程使用 .net 网络表单，其工作方式与 MVC 略有不同。

我会尝试用 [HttpPost] 替换 [WebMethod()] 装饰并返回一个 ActionResult

[HttpPost]
public ActionResult UploadImage(string imageData)
{
    // do stuff
    return new ActionResult();
}

您可能会发现查看浏览器开发工具中的网络选项卡以查看来自服务器的响应是很有用的。我怀疑它现在正在抛出 500 错误。

【讨论】：

我对代码进行了一些其他修改来尝试这个。请参阅更新后的问题。
很高兴您让控制器正常工作。作为另一个问题，您可能会得到更好的结果。我不知道可以做到这一点的 API，因为它位于浏览器沙箱之外。可能需要一个插件。

【解决方案2】：

您应该向服务器发送一个字节数组，其中字节数组是您的图像。例如，您可以查看here，如何从画布中获取 blob。

在客户端：let formData = new FormData(); formData.append('files[0]', someBlob);// send formData

在服务器端：var form = await Request.ReadFormAsync(); var file = form.Files.First(); var bytes = file.OpenReadStream().ToBytes();

【讨论】：