将canvas图像保存到服务器ASP.NET MVC

Question

我想要做的是捕捉一张图片并将其保存在服务器端。到目前为止，该图片仅被保存在客户端。

<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>

UserHomeController:

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();
                }
            }
        }

我按照这个教程进行操作：http://www.dotnetfunda.com/articles/show/1662/saving-html-5-canvas-as-image-on-the-server-using-aspnet。

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

///location.href = img;

此外，我想知道是否有可能在浏览器最小化的情况下捕获屏幕？或者有没有其他方法可以完成此操作？

更新：

我已经成功将截图保存到服务器端，但问题仍然存在：当浏览器最小化时，如何捕获屏幕？我运行脚本并将浏览器最小化，但它仍然捕获浏览器图像并将其保存到服务器文件夹中。现在有没有办法捕获浏览器之外的屏幕图像？

- user9046719

---

看起来你在发送文件时遇到了问题。尝试从这里获取答案。 - sphirate.thremer

Answer 1

本教程使用的是 .net web forms，其与 MVC 有些不同。

我建议尝试将 [WebMethod()] 装饰替换为 [HttpPost] 并返回一个 ActionResult。

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

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

- Tom Elmore

---

我尝试了几个对代码的修改。请查看更新后的问题。 - user9046719

很高兴你成功让控制器工作了。你可以另外提一个问题，也许会得到更好的结果。我不知道是否有API可以做到这一点，因为它超出了浏览器沙盒的范围。可能需要一个插件。 - Tom Elmore

Answer 2

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

客户端代码：let formData = new FormData(); formData.append('files[0]', someBlob);// 发送formData

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

- Diyaz Yakubov