Laden Base64 Bild zu .NET Webservice und konvertieren Sie es dort

Question

Ich habe eine Funktion, die Daten über data:JSON.stringify(formdata) mit POST zu einem .NET Webservice zu entfernen. Ich habe bis jetzt kein Problem. Was ich hinzufügen möchte, füge auch einen anderen Wert zum formdata JSON hinzu, der ein base64-Bild enthält und es an den Server sendet, und dort werde ich es wieder in ein JPEG-Bild konvertieren.

Wie kann ich das so? Ich habe bereits eine Vorschau-Funktion, die eine Vorschau erstellt, sondern auch ein base64 Bild erstellen:

function previewFile() { 
    var preview = document.querySelector('.uploadimage'); 
    var file = document.querySelector('input[type=file]').files[0]; 
    var reader = new FileReader(); 

    reader.addEventListener("load", function() { 
     preview.src = reader.result; 
    }, false); 

    if (file) { 
     reader.readAsDataURL(file); 
    } 
} 

ich viele Fragen der Menschen sehe, zu fragen, wie Bild auf den Server hochgeladen werden. Ich möchte bei der aktuellen Konfiguration bleiben, aber die base64-Bilddaten einfach als String an den Server übergeben. Ich sehe viele Entwickler damit kämpfen, und die meisten von ihnen nur ein Formular in Javascript erstellen und so einreichen.

Answer 1

Hier ist ein kürzliches, wie ich dies tat:

string base64 = base64string.Substring(base64string.IndexOf(',') + 1); 
byte[] imageData = Convert.FromBase64String(base64); 
Image img; 
using (var ms = new MemoryStream(imageData, 0, imageData.Length)) { 
img = Image.FromStream(ms, true); 

Sie benötigen:

using System.Drawing; 

oder einfach zu einem jpg zu konvertieren, verwenden Sie diese:

File.WriteAllBytes("image.jpeg", Convert.FromBase64String(base64)); 

Für Senden der Daten verwende ich die folgenden JS:

function sendImage() { 
    if (this.files && this.files[0]) { 
     var FR = new FileReader(); 
     FR.onload = function (e) { 
      $("#imgImage").attr("src", e.target.result); //show a preview 
      //send e.target.result as a string to your webservice 
     }; 
     FR.readAsDataURL(this.files[0]); 
    } 
} 

Ich benutze dieses Ereignis für hochgeladene Dateien zu hören:

document.getElementById("fileid").addEventListener("change", sendImage, false); 

und das vordere Ende:

<input type="file" id="fileid" />