Speichern von Leinwandbild auf Server ASP.NET mvc

Question

Was ich versuche, ist ein Bild zu erfassen und dann auf der Serverseite zu speichern. Bisher wurde das Bild nur auf der Client-Seite gespeichert.

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

ich dieses tute verfolgt haben: http://www.dotnetfunda.com/articles/show/1662/saving-html-5-canvas-as-image-on-the-server-using-aspnet

Warum ist es nicht das Bild zu speichern, sobald die Seite fertig geladen ist? Obwohl es Anzeigen des Bildes in einem anderen Register, wenn ich die folgende Zeile und Entfernen der Ajax-Kommentar-:

///location.href = img; 

Außerdem möchte ich wissen, ob es möglich ist, den Bildschirm, auch wenn der Browser minimiert ist zu erfassen? oder irgendeinen Weg, um das zu erreichen?

Aktualisiert:

So habe ich erfolgreich den Screenshot zu meinem Server-Seite gespeichert, aber es bleibt die Frage, wie erfasse ich den Bildschirm, wenn der Browser minimiert wird? Ich führe das Skript aus und minimiere den Browser, aber es erfasst immer noch das Browserbild und speichert es im Serverordner. Kann ich das Bild des Bildschirms auch außerhalb des Browsers erfassen?

Answer 1

Das Lernprogramm verwendet .net Webformulare, die ein wenig anders als MVC funktioniert.

Ich würde versuchen, die [WebMethod()] Dekoration mit [Httppost] und geben ein Action ersetzen

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

Sie finden es vielleicht nützlich, auf der Registerkarte Netzwerk in den Browser-Entwickler-Tools, um zu sehen, was die Antwort vom Server ist. Ich vermute gerade jetzt wirft es einen 500 Fehler.

Answer 2

Sie sollten ein Byte-Array an den Server senden, wo Byte-Array Ihr Bild ist. Zum Beispiel können Sie überprüfen, here, wie Blob aus Leinwand erhalten.

Auf Client-Seite: let formData = new FormData(); formData.append('files[0]', someBlob);// send formData

Auf Server-Seite: var form = await Request.ReadFormAsync(); var file = form.Files.First(); var bytes = file.OpenReadStream().ToBytes();