Сохранение HTML 5 Canvas как изображение на сервере с помощью ASP.NET

Мне нужна помощь здесь.

Я пытаюсь сохранить изображение холста после рисования.

после этого примера (http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx)

$("#btnSave").click(function () {

    var image = document.getElementById("canvas").toDataURL("image/png");
    image = image.replace('data:image/png;base64,', '');

    $.ajax({
        type: 'POST',
        url: "../../Home/UploadImage?imageData=" + image,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert('Image saved successfully !');
        }
    });
});

контроллер:

public void UploadImage(string imageData)
{
    string fileNameWitPath = path + 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();
        }
    }
}

Но когда я пытаюсь преобразовать форму base64 в строку, которая передается как параметр в методе, выведите ошибку

Недопустимая длина для массива символов Base-64.

Ответы

Ответ 1

Вы не можете отправлять данные с параметрами querystring

Попробуйте это;

    $("#btnSave").click(function () {

        var image = document.getElementById("canvas").toDataURL("image/png");
        image = image.replace('data:image/png;base64,', '');

        $.ajax({
            type: 'POST',
            url: "../../Home/UploadImage",
            data: '{ "imageData" : "' + image + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });
    });

Ответ 2

В этом примере автор разместил данные изображения с помощью скрытого поля, в нижней строке которого написано примечание ниже.

<input type="hidden" name="imageData" id="imageData" />

http://www.dotnetfunda.com/articles/show/2665/saving-html-5-canvas-as-image-in-aspnet-mvc

И при нажатии кнопки он отправляет форму после получения данных холста в скрытое поле, поэтому следуйте одному и тому же подходу. Как написано Мехметом, у querystring есть ограничения и его склонность к изменению, поскольку она идет через URL.

Ответ 3

Вместо этого

image = image.replace('data:image/png;base64,', '');

используйте это:

image = image.substr(23, image.length);

удалите ведущие символы до первой запятой (используйте любой инструмент dev, чтобы увидеть, что вы разместили).