Question

基本上，我正在执行标题所述的操作，尝试将div的内容保存为图像。

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

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

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

<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>

虽然，我收到了这个错误：

TypeError: c.getContext is not a function

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

Answer 1

这个问题有几个（1，2）。一种方法是使用画布。 Here's a working solution。 Here您可以看到使用此库的一些实际示例。

Answer 2

做这样的事情：

ID为<div>的{{1}}，ID为#imageDIV的另一个，ID为#download的隐藏<div>。

包含最新版本的jquery，以及来自the jspdf CDN的jspdf.debug.js

然后添加此脚本：

#previewImage

点击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); });

后，div将保存为PNG

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

2 个答案: