キャンバスイメージをサーバーに保存する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(); 
       } 
      } 
     } 

私はこのtuteを踏襲していますページの読み込みが行われるように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 WebフォームをMVCと少し違って使います。

私はあなたがそれが役に立つものを見るために、ブラウザのdevのツールでネットワーク]タブを見て見つけることができ[HttpPost]と[WebMethod属性（）]装飾を交換してくださいとのActionResult

に

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

を返しますサーバーからの応答はです。私は今、それが500のエラーを投げていると思う。

Answer 2

バイト配列をサーバーに送信する必要があります。ここで、byte配列はイメージです。 例えば、here、キャンバスからブロブを取得する方法をチェックすることができます。クライアント側では

：サーバー側で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();