使用ASP.NET将HTML 5 Canvas保存为服务器上的Image

我需要一些帮助..

我试图在绘图后保存canvas图像..

按照这个例子（ 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(); } } } 

但是，当我试图转换formsbase64时，像方法中的参数传递的字符串，抛出一个错误

字符数组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

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

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

点击按钮后，他在将canvas数据输入隐藏字段后提交表单，因此请遵循相同的方法。 正如Mehmet所写，查询字符串有局限性，并且它很容易通过url进行修改。

Answer 3

而不是这个

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

用这个：

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

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