Сохранить холст как изображение в ASP.NET Core

Question

Я пытаюсь отправить изображение блоба javascript в метод контроллера в ASP.NET Core 2.1.но мои строковые параметры всегда null в методе.

Это мой JavaScript:

$(".btn").click(function(e) {
    var image = document.getElementById("canvas").toDataURL("image/png");
    image = image.replace('data:image/png;base64,', '');
    $.ajax({
        type: 'POST',
        url: '@Url.Action("Add", "Home")',
        data: { imageData: image },
        ajaxasync: true,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert('Image saved successfully !');
        }
    });
});

Это мой Контроллер:

[HttpPost]
public  JsonResult Add(string imageData)
{
    try
    {
        var folderName = @"uploads/";
        var webRootPath = _appEnvironment.WebRootPath;
        var newPath = Path.Combine(webRootPath, folderName);
        string fileNameWitPath = newPath + 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);
                bw.Write(data);
                bw.Close();
            }
        }

        return new JsonResult("Success");
        }
    catch (Exception exception)
    {
        return new JsonResult("Error");
    }
}

Answer 1

Вам просто нужно удалить эту строку

contentType: 'application/json; charset=utf-8'

Причина в том, что JQuery преобразует объект, переданный как data параметр в формат key1=value1&key2=value2&... по умолчанию, который, по-видимому, не является допустимым json.Таким образом, вам не нужно указывать application/json тип контента, и ASP.NET Core автоматически проанализирует эти данные должным образом.

Но если вы хотите, чтобы запрос работал с json типом контента, вам нужно сделатьследующий

JavaScript

var image = document.getElementById("canvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
var data = JSON.stringify({ imageData: image }); //serializing object to json

$.ajax({
    type: 'POST',
    url: '@Url.Action("Add", "Home")',
    data: data, //passing json string
    ajaxasync: true,
    contentType: 'application/json',
    dataType: 'json',
    success: function (msg) {
    }
});

C #

public class Model
{
    public string ImageData { get; set; }
}

[HttpPost]
public IActionResult Add([FromBody]Model model) { //..