使用 ASP.NET 在服务器上将 HTML 5 Canvas 保存为图像 [英] Saving HTML 5 Canvas as Image on the server using ASP.NET

问题描述

我需要一些帮助..

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

Im trying to save a canvas image after drawing..

按照这个例子(http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx)

following this example (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 转换为方法中像参数一样传递的字符串时，抛出错误

But when im trying to convert form base64 the string that is passed like parameter in method, throw an error

字符数组 Base-64 的长度无效.

Invalid length for a character array Base-64.

推荐答案

您不能发布带有查询字符串参数的数据

You can't post data with querystring parameters

试试这个；

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

这篇关于使用 ASP.NET 在服务器上将 HTML 5 Canvas 保存为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！