Javascript html2canvas截图捕获当前窗口,而不是整个身体
试图用javascript捕获整个页面(包括用户填写的字段)的屏幕截图,但html2canvas仅捕获当前窗口,即使我将高度设置为一个很大的数字。html2canvas网站示例似乎具有我想要的功能,但我无法理解它们的不同之处Javascript html2canvas截图捕获当前窗口,而不是整个身体,javascript,screenshot,html2canvas,Javascript,Screenshot,Html2canvas,试图用javascript捕获整个页面(包括用户填写的字段)的屏幕截图,但html2canvas仅捕获当前窗口,即使我将高度设置为一个很大的数字。html2canvas网站示例似乎具有我想要的功能,但我无法理解它们的不同之处 <button id="pdfbutton" type="button">Click Me!</button> <script type="text/javascript"> $( "#pdfbutton" ).click(functi
<button id="pdfbutton" type="button">Click Me!</button>
<script type="text/javascript">
$( "#pdfbutton" ).click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
console.log(img);
document.body.appendChild(canvas);
}
// height: 10000
});
});
</script>
点击我!
$(“#pdfbutton”)。单击(函数(){
html2canvas(document.body{
onrendered:函数(画布){
//document.body.appendChild(画布);
var img=canvas.toDataURL(“image/png”);
控制台日志(img);
document.body.appendChild(画布);
}
//身高:10000
});
});
请告诉我是否有其他方法可以通过javascript中的按钮点击捕获屏幕截图(不插入URL,因为用户在我的页面上填写字段)。通过删除html2canvas不支持的样式属性(高度、位置)并在捕获屏幕截图后添加,解决了此问题。就我而言,我面临着职位问题
$('.element').css('position','initial'); // Change absolute to initial
$my_view = $('#my-view');
var useHeight = $('#my-view').prop('scrollHeight');
html2canvas($my_view[0], {
height: useHeight,
useCORS: true,
allowTaint: true,
proxy: "your proxy url",
onrendered: function (canvas) {
var imgSrc = canvas.toDataURL();
var popup = window.open(imgSrc);
$('.element').css('position','absolute');
}
});
这将拍摄整个屏幕的截图,包括可滚动部分 Html2Canvas有一个问题,它迫使它从顶部窗口的边界渲染元素。您可以考虑滚动到元素的顶部。 第二个问题是溢出处理。在父元素上设置
overflow:visible
,并在导出后将其删除