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

【问题标题】：Saving HTML 5 Canvas as Image on the server using ASP.NET使用 ASP.NET 在服务器上将 HTML 5 Canvas 保存为图像
【发布时间】：2012-06-03 07:30:36
【问题描述】：

我需要一些帮助..

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

按照这个例子 (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 字符数组的长度无效。

【问题讨论】：

图像附加到 imageData 时有多长？如果它相当大（> 1500 个字符），那么我怀疑您的网址被截断了。尝试通过警报或其他方式直接从网页中获取值，并在 .NET 程序中使用它来确定它是否适用于完整的图像数据长度。如果可行，请使用内容通过 post 而不是 url?param=data 发送数据（此处仍受 2,000 个字符的限制）
除了@PeterSmith 的建议，既然你反正是在做POST，不妨把它放在POST 数据中。
imageData 有 1400 个字符。我在控制器中获取字符串，但是当我尝试从 base 64 字符串（myString）转换时抛出 FormatException（Base-64 字符数组的长度无效。）
@Fausto 你是如何解决这个问题的？您是否按照建议使用了 contentType，因为它对我不起作用
contentType 应该是 ContentType。

标签： javascript c# file-upload html5-canvas base64

【解决方案1】：

不是这个

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

使用这个：

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

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

【讨论】：

【解决方案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 时很容易被修改。

【讨论】：

【解决方案3】：

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

试试这个；

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

【讨论】：

我尝试发送数据：'{ "imageData" : "' + image + '" }'，但是 action 方法中的 imagData 参数为空..
尝试将 alert(image); 添加到您的 javascript 代码中。查看image 是否为空
我像这样在 ajax 中发送 imageData 字符串： url: "../../Home/UploadImage?imageData="+image，我收到了字符串，但是当我尝试从base 64 字符串 (myString) 抛出 FormatException（Base-64 字符数组的长度无效。）
正如@PeterSmith 之前提到的，querystring limit in IE is 2000 字符。您收到该错误会导致您的 base64 图像数据被裁剪。您需要向您的操作发出 POST 请求。
你们都救了我的命。