如何保存html2canvas图像到系统文件夹中的jQuery [英] How to save html2canvas image into System Folder in jquery
问题描述
我有ID =这种形式,我有内部form1的形式的graph.Now我使用html2canvas得到这个form1.Here的形象是我的code ..
I have a form with id="form1" inside this form i have a graph.Now i am using html2canvas to get the image of this form1.Here is my code..
<script type="text/javascript">
$(document).ready(function () {
$('#add_button').click(function () {
alert("hiii");
$('form1').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue, { elements: { length: 1} });
var img = canvas.toDataURL();
window.open(img);
alert("Hello");
});
});
</script>
<form id="form1" runat="server">
<div style="padding-left:150px">
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
<div style="padding-left:350px"><b>Demo</b></div>
</form>
<input type="submit" id="add_button" value="Take Screenshot Of Div" " />
所以我的问题是如何能我这个图像保存到我的系统hardisk..Please帮我。
So my question is how can i save this image into my system hardisk..Please help me.
推荐答案
系统hardisk?我不明白,服务器或客户端?
System hardisk? I did not understand, server or client?
如果您希望用户自动下载图片,您将需要修改数据URI方案
If you want the user to download the image automatically, you will need to modify the Data URI scheme
试试这个:
添加在CSS
#myHideFrame {
position: absolute;
top: -9999px;
width: 1px;
height: 1px;
}
添加在Javascript
Add in 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;");
不幸的是这个例子没有显示名字,为此,你将不得不做这样的事情(用户无需点击链接):
Unfortunately this example does not show the name, for this you will have to do something like this (user need click in link):
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);
服务器
如果你想保存在服务器上,那么你需要使用阿贾克斯
,例如使用jQuery:
SERVER
If you want to save on the server then you need to use Ajax
, example with Jquery:
的Javascript文件,
Javascript file:
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文件的需要:
Your upload.aspx.cs file need:
...
[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();
}
}
}
...
查看详情:<一href=\"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
这篇关于如何保存html2canvas图像到系统文件夹中的jQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!