html2canvas能画隐藏的元素吗,使用html2canvas隐藏div的屏幕截图
10 个答案:
答案 0 :(得分：13)
您可以将不透明度设置为0.以下是示例示例：
var tempImageThumb = $('#tempImageThumbnail');
tempImageThumb.append("
html2canvas([tempImageThumb.get(0)], {
onrendered : function(canvas) {
document.body.appendChild(canvas);
}
});
答案 1 :(得分：4)
html2canvas(mydiv, {
onclone: function (clonedDoc) {
clonedDoc.getElementById('mydiv').style.display = 'block';
}
}).then((canvas)=>{
//your onrendered function code here
})
答案 2 :(得分：3)
使用＆＃34;可见性：无＆＃34;代替＆＃34;显示：无＆＃34;在div中并在html2canvas.js脚本文件中更改以下内容 - 在函数parseElement中更改
if (getCSS(el, 'display') !== "none" && getCSS(el, 'visibility') !== "hidden")
到
if (getCSS(el, 'display') !== "none")
答案 3 :(得分：2)
以下代码对我有用。我在jsPdf和html2canvas库中使用Angular
void makePdf() async {
final pw.Document doc = pw.Document();
pw.Font font = pw.Font.ttf(await rootBundle.load('assets/Exo-Bold.ttf'));
doc.addPage(
pw.Page(
pageFormat: pdf.PdfPageFormat.a4,
build: (pw.Context context) {
return pw.Center(
child: pw.Text(
"Hello World",
style: pw.TextStyle(font: font),
),
); // Center
},
),
);
final file = File("ms.pdf");
List data = doc.save();
// print(data);
file.writeAsBytes(data).then((file) {
print("done");
}).catchError((e) => print(e));
答案 4 :(得分：2)
这有效：
content to screenshot
答案 5 :(得分：1)
我不确定是否有开箱即用的方法来实现这一目标。如何显示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();
}
});
答案 6 :(得分：1)
html2canvas通过传递克隆文档提供了一个名为“onclone”的选项。您可以在那里设置隐藏元素的可见性。
onclone: function(doc){
hiddenDiv = doc.getElementById('myDiv');
hiddenDiv.style.display = 'block';
}
答案 7 :(得分：0)
您可以创建一个画布功能，然后可以基于它显示和隐藏。我还使用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();
})
答案 8 :(得分：0)
首先，我敢说：这个解决方案适用于所有情况إن شاء الله
由于此解决方案基于jQuery API，因此不要使用hide/show，而是使用fadeOut/fadeIn。
脚本：
var elem = $('#printDiv');
if(!elem.is(":visible")){
elem.show();elem.fadeIn(1);elem.fadeOut(1);
}
html2canvas(elem, {
onrendered: function (canvas) {
//your staff here
}
});
注意：
我们使用此存储库html2canvas，语法将是then函数而不是onrendered回调：
var elem = $('#printDiv');
if(!elem.is(":visible")){
elem.show();elem.fadeIn(1);elem.fadeOut(1);
}
html2canvas(elem).then(function (canvas) {
//your staff here
}
);
答案 9 :(得分：-2)
使用可见性：折叠它将起作用