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

基本上，我在做标题所述的事情，试图将div的内容保存为图像

我计划为iPad制作一个小型在线应用程序

必须具备的一项功能是，有一个“保存”按钮，可以将整个网页保存为图像，并将图像保存到iPad的照相/摄像机上。我希望保存div的全部内容，而不仅仅是可见区域

我在网上搜索了一下，但找不到任何相关的文档。我在HTML5画布上发现了很多。以下是我编写的一些代码：

<script>
function saveimg()
{
    var c = document.getElementById('mycanvas');
    var t = c.getContext('2d');
    window.location.href = image;

    window.open('', document.getElementById('mycanvas').toDataURL());
}
</script>

<div id="mycanvas">
This is just a test<br />
12344<br />
</div>

<button onclick="saveimg()">Save</button>

---

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

同样的问题有几个（，）。一种方法是使用画布。您可以看到一些使用此库的工作示例。

执行以下操作：

一个ID为

#imageDIV

的

，另一个ID为

#download

的

和一个ID为

#previewImage

的隐藏

包括最新版本的jquery和来自的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);
});

---

点击

#下载
可能重复的@GlenSwift，div将被保存为PNG格式-谢谢，但那篇文章中的示例代码不起作用。
c.getContext
不是一个函数，因为
mycanvas
只是一个div，而不是
canvas
元素。只有
canvas
es有上下文。每次使用时，它都会给我以下错误。html2canvas（document.body）.then（函数（canvas）{document.body.appendChild（canvas）；}）；TypeError:undefined不是一个函数。没有足够的信息为您的问题提供正确的解决方案。什么函数是未定义的？错误何时何地抛出？我建议您为此创建一个新问题，因为OnRendered从未执行过，因此getCanvas未定义。在html2canvas中，Rendered显然已过时。使用
.then
方法，而不是像'html2canvas（元素）.then（函数（画布）{yourcode（）；}）；
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);
});