[英]How to save the contents of a div as a image?
基本上,我正在做标题所说的,试图将 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 库)构建。
有几个相同的问题( 1 , 2 )。 一种方法是使用画布。 这是一个有效的解决方案。 在这里你可以看到一些使用这个库的工作示例。
做这样的事情:
一个 ID 为#imageDIV
<div>
,另一个 ID 为#download
的<div>
和一个 ID 为#previewImage
的隐藏<div>
。
包括最新版本的 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.