如何将div中的内容保存为图像？
如何将div中的内容保存为图像？
提问于 2013-09-03 06:06:27
基本上，我正在做标题所述的操作，尝试将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>尽管如此，我还是得到了这个错误：
TypeError: c.getContext is not a function这个应用程序将只使用HTML，CSS和jQuery (或其他Javascript库)构建。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-03 06:20:07
有几个相同的问题(1，2)。其中一种方法是使用canvas。Here's a working solution。Here你可以看到一些使用这个库的工作示例。
Stack Overflow用户
发布于 2018-06-13 06:34:25
这样做：
一个ID为#imageDIV的<div>，另一个ID为#download的<div>和一个ID为#previewImage的隐藏<div>。
包括最新版本的jquery和来自the 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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18581379
复制相关文章
相似问题