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;

此外，即使浏览器已最小化，我想知道是否可以捕获屏幕？或者以任何方式完成这项工作？

更新：

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

Answer 1

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

我会尝试用[HttpPost]替换[WebMethod（）]装饰并返回ActionResult

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

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

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

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

2 个答案: