使用ASP.NET将HTML 5 Canvas保存为服务器上的Image
我需要一些帮助..
我试图在绘图后保存canvas图像..
按照这个例子( https://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的长度无效。
您无法使用查询字符串参数发布数据
试试这个;
$("#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 !'); } }); });
在该示例中,作者使用隐藏字段发布了图像数据,在他的文章中的代码行下面注意到
https://www.dotnetfunda.com/articles/show/2665/saving-html-5-canvas-as-image-in-aspnet-mvc
点击按钮后,他在将canvas数据输入隐藏字段后提交表单,因此请遵循相同的方法。 正如Mehmet所写,查询字符串有局限性,并且它很容易通过url进行修改。
而不是这个
image = image.replace('data:image/png;base64,', '');
用这个:
image = image.substr(23, image.length);
删除前导字符直到第一个逗号(使用任何开发工具查看您发布的内容)。
上述就是C#学习教程:使用ASP.NET将HTML 5 Canvas保存为服务器上的Image分享的全部内容,如果对大家有所用处且需要了解更多关于C#学习教程,希望大家多多关注—计算机技术网(www.ctvol.com)!
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/cdevelopment/1001103.html