在ASP.NET Core中将画布另存为图像

Question

I'm trying to send a javascript canvas blob image to my controller method in ASP.NET Core 2.1. but my string parameters is always null in method.

This is my 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 !');
        }
    });
});

This is my Controller:

[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

You just need to remove this line

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

The reason is JQuery transforms object passed as data param to key1=value1&key2=value2&... format by default which apparently is not valid json. So you do not need to specify application/json content type and ASP.NET Core will automatically parse this data properly.

But if you want to make the request work with json content type you will need to do the following

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) { //..