javascript - 网页截图

Question

我有一个网页，上面实现了 jorgchart，它垂直和水平延伸超过网页的限制并显示滚动条，这很好。但是当我们拍摄相同的快照时，它只给出网页可见区域的快照，但完整的 div/canvas。有人可以建议...

var displayID = $("#canvasData").attr('class');
var canvas = document.querySelector("canvas");
html2canvas(document.querySelector("#" + displayID), {canvas: canvas}).then(function(canvas) {

        canvas.id = "h2canvas";
        $('.popup p').html(canvas);
        openPopUp('popup-x');
    });

Answer 1

使用这个awesome answer ，这应该有效:

// Reference values
var displayID = $("#canvasData").attr('class'),
canvas = document.querySelector("canvas"),
body = document.body,
html = document.documentElement;

// Calculate entire document width/height
var pageHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, 
html.scrollHeight, html.offsetHeight );

var pageWidth = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );

html2canvas(document.querySelector("#" + displayID), 
    {canvas: canvas, height: pageHeight, width: pageWidth})
    .then(function(canvas) {
        canvas.id = "h2canvas";
        $('.popup p').html(canvas);
        openPopUp('popup-x');
    });