javascript - 使用 ASP.NET 在服务器上将 HTML 5 Canvas 保存为图像

Question

我需要一些帮助..

我试图在绘制后保存画布图像..

按照这个例子（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 的长度无效。

Answer 1

您不能使用查询字符串参数发布数据

试试这个;

    $("#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 !');
            }
        });
    });

Answer 2

在该示例中，作者使用隐藏字段发布了图像数据，请注意他文章中的以下代码行

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

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

单击按钮后，他将画布数据获取到隐藏字段后提交表单，因此请遵循相同的方法。正如 Mehmet 所写，querystring 有局限性，并且在通过 url 时很容易被修改。

Answer 3

而不是这个

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

用这个：

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

删除前导字符直到第一个逗号（使用任何开发工具查看您发布的内容）。