如何拍摄隐藏的div的屏幕截图?下面给出的代码不适用于隐藏的div。
的HTML
<div id="mydiv" style="display:none;" >
<p>Text</p>
</div>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
</div>
脚本
<script>
var elem = $('#printDiv');
html2canvas(elem, {
onrendered: function (canvas) {
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
</script>
当我们将div“ mydiv”的样式设置为'display:block'时,它将起作用。
您可以将不透明度设置为0。这是示例示例:
<div style="position: absolute; opacity: 0.0;">
<div id="tempImageThumbnail"></div>
</div>
var tempImageThumb = $('#tempImageThumbnail');
tempImageThumb.append("<div>some text</div>");
html2canvas([tempImageThumb.get(0)], {
onrendered : function(canvas) {
document.body.appendChild(canvas);
}
});
html2canvas(mydiv, {
onclone: function (clonedDoc) {
clonedDoc.getElementById('mydiv').style.display = 'block';
}
}).then((canvas)=>{
//your onrendered function code here
})
在div中使用“可见性:无”而不是“显示:无”,并在html2canvas.js脚本文件中更改以下内容-在函数parseElement中进行更改
if (getCSS(el, 'display') !== "none" && getCSS(el, 'visibility') !== "hidden")
至
if (getCSS(el, 'display') !== "none")
html2canvas通过传递克隆的文档提供了一个名为“ onclone ”的选项。您可以在那里设置隐藏元素的可见性。
onclone: function(doc){
hiddenDiv = doc.getElementById('myDiv');
hiddenDiv.style.display = 'block';
}
以下代码对我有用。我正在将Angular与jsPdf和html2canvas库一起使用
html2canvas(document.getElementById("pdfTable"), {
onclone: function (clonedDoc) {
// I made the div hidden and here I am changing it to visible
clonedDoc.getElementById('pdfTable').style.visibility = 'visible';
}
}).then(canvas => {
// The following code is to create a pdf file for the taken screenshot
var pdf = new jsPDF('l', 'pt', [canvas.width, canvas.height]);
var imgData = canvas.toDataURL("PNG", 1.0);
pdf.addImage(imgData, 0, 0, (canvas.width), (canvas.height));
pdf.save('converteddoc.pdf');
});
这正在工作:
<div style="width:0;height:0;overflow: hidden">
<div>
content to screenshot
</div>
</div>
我不确定是否有现成的方法可以实现这一目标。如何显示div,捕获然后再次隐藏呢?
var elem = $('#printDiv');
html2canvas(elem, {
onrendered: function (canvas) {
elem.show();
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
elem.hide();
}
});
您可以创建一个canvas函数,然后可以基于它显示和隐藏。我还使用jsPDF将图像转换为pdf。像这样
function generateCanvas() {
html2canvas(document.querySelector("#yourid"), {
scrollX: 0,
scrollY: -window.scrollY
}).then(canvas => {
//var imgData = canvas.toDataURL("image/jpeg", 2.0);
var imgData = canvas.toDataURL({
format: 'jpeg',
quality: 1.0
});
$("#canvas_container").attr("src", imgData);
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 10, 10, 180, 150); // 180x150 mm @ (10,10)mm
pdf.save("download.pdf");
});
}
$("#download_pdf").on("click", function (e) {
e.preventDefault();
$("#yourid").show();
generateCanvas();
$("#yourid").hide();
})
首先,我敢说:此解决方案适用于所有情况 إن شاء الله
由于此解决方案基于jQuery API,因此请勿使用,
hide/show
而应使用fadeOut/fadeIn
。
脚本:
<script>
var elem = $('#printDiv');
if(!elem.is(":visible")){
elem.show();elem.fadeIn(1);elem.fadeOut(1);
}
html2canvas(elem, {
onrendered: function (canvas) {
//your staff here
}
});
</script>
注意:我们使用此存储库html2canvas,语法将是then
函数而不是onrendered
回调:
<script>
var elem = $('#printDiv');
if(!elem.is(":visible")){
elem.show();elem.fadeIn(1);elem.fadeOut(1);
}
html2canvas(elem).then(function (canvas) {
//your staff here
}
);
</script>
本文地址:http://jquery.askforanswer.com/shiyonghtml2canvasdeyincangdivdepingmujietu.html
文章标签:html5-canvas , javascript , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
文章标签:html5-canvas , javascript , jquery
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!