將畫布圖像保存到服務器ASP.NET mvc

我想要做的是捕獲圖像，然後將其保存在服務器端。到目前爲止，該圖像只保存在客戶端。將畫布圖像保存到服務器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;

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

更新時間：

因此，我已成功保存截圖到我的服務器端，但問題是，我該如何捕獲屏幕最小化瀏覽器是什麼時候？我運行腳本並儘量減少瀏覽器，但它仍然捕獲瀏覽器圖像並將其保存到服務器文件夾。無論如何，我現在可以在瀏覽器外部捕捉屏幕圖像嗎？

來源

2017-12-27 Mick Jagz

看起來你有問題，發送文件。試試從[這裏]的答案（https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax）。 –

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

我會嘗試與更換[的WebMethod（）]裝修[HttpPost]，並返回一個ActionResult

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

你可能會發現看在瀏覽器開發工具的網絡標籤，看看有什麼服務器的響應是。我懷疑現在正在拋出500錯誤。

來源

2017-12-27 11:27:21

我嘗試了一些代碼的其他修改。請參閱更新後的問題。 –

很高興你有控制器工作。作爲另一個問題，您可能會得到更好的結果。我沒有意識到一個API可以做到這一點，因爲它在瀏覽器沙箱之外。插件可能是需要的。 –

您應該發送一個字節數組到服務器，其中字節數組是您的圖像。例如，您可以檢查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();

來源

2017-12-27 11:47:23

將畫布圖像保存到服務器ASP.NET mvc

回答

相關問題