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

基本上，我正在执行标题所述的操作，尝试将 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 库)构建。

223897 次浏览
小开
最佳答案

有几个同样的问题(1，2)。一种方法是使用画布。这是一个可行的解决方案.您可以看到使用这个库的一些工作示例。

小开

做这样的事情:

一个 ID 为 #imageDIV的 <div>，另一个 ID 为 #download的 <div>和一个 ID 为 #previewImage的隐藏 <div>。

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

在单击 #download时，div 将被保存为 PNG


提交答案