[英]Saving HTML 5 Canvas as Image on the server using ASP.NET
我需要一些帮助..
我试图在绘图后保存画布图像..
$("#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的长度无效。
您无法使用查询字符串参数发布数据
试试这个;
$("#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 !');
}
});
});
在该示例中,作者使用隐藏字段发布了图像数据,请注意他的文章中的代码行
<input type="hidden" name="imageData" id="imageData" />
http://www.dotnetfunda.com/articles/show/2665/saving-html-5-canvas-as-image-in-aspnet-mvc
点击按钮后,他在将画布数据输入隐藏字段后提交表单,因此请遵循相同的方法。 正如Mehmet所写,查询字符串有局限性,并且它很容易通过url进行修改。
而不是这个
image = image.replace('data:image/png;base64,', '');
用这个:
image = image.substr(23, image.length);
删除前导字符直到第一个逗号(使用任何开发工具查看您发布的内容)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.