在ASP.NET Core中將畫布另存為圖像

Question

我正在嘗試將javascript畫布blob圖像發送到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) { //..