如何将div的内容保存为图像？

基本上，我正在做标题所说的，试图将div的内容保存为图像。

我打算为iPad制作一个小型在线应用程序。

一个必须的function是具有“保存”按钮，可以将整个网页保存为图像，并将该图像保存到iPad的相机胶卷。 我希望保存div的全部内容，而不仅仅是可见区域。

我在网上简短搜索过，但找不到任何关于任何内容的文档。 我在HTML5 Canvas上发现了很多东西。 这是我放在一起的一些代码：

 function saveimg() { var c = document.getElementById('mycanvas'); var t = c.getContext('2d'); window.location.href = image; window.open('', document.getElementById('mycanvas').toDataURL()); }  
 This is just a test
 12344
 
 Save 

虽然，我收到此错误：

 TypeError: c.getContext is not a function 

此应用程序将仅使用HTML，CSS和jQuery（或其他Javascript库）构建。

Answer 1

有几个同样的问题（ 1,2 ）。 一种方法是使用canvas。 这是一个有效的解决方案 。 在这里，您可以看到使用此库的一些实际示例。

Answer 2

做这样的事情：

ID为#imageDIV

，ID为#download另一个

和ID为#previewImage的隐藏

。

包含最新版本的jquery和jspdf CDN中的jspdf.debug.js

然后添加此脚本：

 var element = $("#imageDIV"); // global variable var getCanvas; // global variable $('document').ready(function(){ html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } }); }); $("#download").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#download").attr("download", "image.png").attr("href", newData); }); 

单击#download ，div将保存为PNG