系统硬盘?我没明白,服务器还是客户端?
CLIENT
如果希望用户自动下载图片,则需要修改数据 URI 方案 http://en.wikipedia.org/wiki/Data_URI_scheme
尝试这个:
在CSS中添加
#myHideFrame {
position: absolute;
top: -9999px;
width: 1px;
height: 1px;
}
添加 JavaScript
var img = canvas.toDataURL();
var frame = document.getElementById("myHideFrame");
if(!frame) {
frame = document.createElement("iframe");
frame.id = "myHideFrame";
document.body.appendChild(frame);
}
frame.src = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");
不幸的是这个例子没有显示名称,为此你将不得不做这样的事情(用户需要点击链接):
var img = canvas.toDataURL();
var link = document.createElement("a");
link.download = "photo.png"; //Setup name file
link.href = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");
document.body.appendChild(link);
SERVER
如果你想保存在服务器上,那么你需要使用Ajax
,以 Jquery 为例:
JavaScript 文件:
var img = canvas.toDataURL().replace(/^data[:]image\/(png|jpg|jpeg)[;]base64,/i, "");
$.ajax({
"type": "POST",
"url": "upload.aspx/UploadImage",
"data": {
"imageData": img //Send to WebMethod
}
}).done(function(o) {
console.log(["Response:" , o]);
});
您的 upload.aspx.cs 文件需要:
...
[WebMethod()]
public static void UploadImage(string imageData)
{
string fileNameWitPath = "custom_name.png";
using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);//convert from base64
bw.Write(data);
bw.Close();
}
}
}
...
查看具体信息:http://www.dotnetfunda.com/articles/show/1662/ saving-html-5-canvas-as-image-on-the-server-using-aspnet http://www.dotnetfunda.com/articles/show/1662/saving-html-5-canvas-as-image-on-the-server-using-aspnet