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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想要做的是捕获图像，然后将其保存在服务器端。到目前为止，该图像只保存在客户端。将画布图像保存到服务器ASP.NET mvc

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

此外，我想知道是否可以捕捉到哪怕最小化浏览器屏幕？或以任何方式来完成？

更新时间：

因此，我已成功保存截图到我的服务器端，但问题是，我该如何捕获屏幕最小化浏览器是什么时候？我运行脚本并尽量减少浏览器，但它仍然捕获浏览器图像并将其保存到服务器文件夹。无论如何，我现在可以在浏览器外部捕捉屏幕图像吗？

回答：

本教程使用的.net web表单与MVC的工作方式稍有不同。

我会尝试与更换[的WebMethod（）]装修[HttpPost]，并返回一个ActionResult

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

你可能会发现看在浏览器开发工具的网络标签，看看有什么服务器的响应是。我怀疑现在正在抛出500错误。

回答：

您应该发送一个字节数组到服务器，其中字节数组是您的图像。 例如，您可以检查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 的全部内容， 来源链接： utcz.com/qa/264520.html

回到顶部