2017-12-27 333 views
3

我想要做的是捕获图像,然后将其保存在服务器端。到目前为止,该图像只保存在客户端。将画布图像保存到服务器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; 

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

更新时间:

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

+0

看起来你有问题,发送文件。试试从[这里]的答案(https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax)。 –

回答

0

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

我会尝试与更换[的WebMethod()]装修[HttpPost],并返回一个ActionResult

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

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

+0

我尝试了一些代码的其他修改。请参阅更新后的问题。 –

+0

很高兴你有控制器工作。作为另一个问题,您可能会得到更好的结果。我没有意识到一个API可以做到这一点,因为它在浏览器沙箱之外。插件可能是需要的。 –

0

您应该发送一个字节数组到服务器,其中字节数组是您的图像。 例如,您可以检查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();

相关问题