Загрузить изображение base64 в .NET webservice и преобразовать его там

Question

У меня есть функция, которая отправляет данные через data:JSON.stringify(formdata) с помощью POST для удаления .NET webservice. У меня нет проблем до сих пор. Что я хочу сделать, чтобы добавить, добавьте еще одно значение в formdata JSON, который будет хранить данные изображения base64 и отправить его на сервер, и там я верну его обратно к изображению JPEG.

Как я могу так? У меня уже есть функция предварительного просмотра, который создал предварительный просмотр, но и создать base64 изображение:

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

Я вижу много людей, вопрос с вопросом, как загружать изображения на сервер. Я хочу остаться с текущей конфигурацией, но просто передаю данные изображения base64 на сервер в виде строки. Я вижу, что многие разработчики борются с этим, и большинство из них просто запустили создание формы в javascript и так подавали.

Answer 1

Вот недавний как я сделал это:

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

Вам понадобится:

using System.Drawing; 

ИЛИ просто конвертировать в JPG, используйте это:

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

Для отправляя данные, я использую следующие 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]); 
    } 
} 

Я использую это событие для прослушивания загруженных файлов:

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

и передний конец:

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