C# 使用 ASP.NET 在服务器上将 HTML 5 Canvas 保存为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10792986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Saving HTML 5 Canvas as Image on the server using ASP.NET
提问by Fausto
I need some help here..
我需要一些帮助..
Im trying to save a canvas image after drawing..
我试图在绘制后保存画布图像..
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 !');
}
});
});
the controller:
控制器：
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();
}
}
}
But when im trying to convert form base64 the string that is passed like parameter in method, throw an error
但是当我尝试将形式 base64 转换为方法中像参数一样传递的字符串时，抛出错误
Invalid length for a character array Base-64.
字符数组 Base-64 的长度无效。
采纳答案by Mehmet Osmanoglu
You can't post data with querystring parameters
您不能使用查询字符串参数发布数据
Try this;
尝试这个;
$("#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 !');
}
});
});
回答by Mshini
Instead of this
而不是这个
image = image.replace('data:image/png;base64,', '');
use this:
用这个：
image = image.substr(23, image.length);
remove the leading characters up to the first comma (use any dev tool to see what you posted).
删除第一个逗号之前的前导字符（使用任何开发工具查看您发布的内容）。
回答by Raja
In that example, the author has posted the image data using a hidden field, notice below line of code in his article
在该示例中，作者使用隐藏字段发布了图像数据，请注意他文章中的以下代码行
<input type="hidden" name="imageData" id="imageData" />
http://www.dotnetfunda.com/articles/show/2665/saving-html-5-canvas-as-image-in-aspnet-mvc
http://www.dotnetfunda.com/articles/show/2665/saving-html-5-canvas-as-image-in-aspnet-mvc
And on click of the button, he is submitting the form after getting canvas data to the hidden field so follow the same approach. As written by Mehmet, querystring has limitations and its prone to be modified as it goes via url.
单击按钮后，他将在将画布数据发送到隐藏字段后提交表单，因此请遵循相同的方法。正如 Mehmet 所写，查询字符串有局限性，并且在通过 url 时容易被修改。
