如何在jquery中将html2canvas图像保存到系统文件夹中

我在这个表单中有一个id =“form1”的表单我有一个图表。现在我使用html2canvas来获取此form1的图像。这是我的代码..

 $(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"); }); });  

 
 
  
 
Demo
 
  

所以我的问题是如何将此图像保存到我的系统硬盘中。请帮助我。

Answer 1

系统硬盘？ 我不明白，服务器还是客户端？

客户

如果您希望用户自动下载图像，则需要修改数据URI方案

试试这个：

加入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); 

服务器

如果要保存在服务器上，则需要使用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

Answer 2

在客户端保存图像的一个更简单的解决方案是生成图像数据并将其附加到带有download属性的标签上。

这是我的例子：

HTML：

 Download 

JS：

 $(function() { html2canvas($('.main'), { onrendered: function(canvas) { $('.downloadAsImage').attr('href', canvas.toDataURL()).removeClass('hide'); } }); }); 

旁注：请记住，您无法通过JS单击$('.downloadAsImage') ，因为它上面有download属性。