Скриншот веб-страницы

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

Используя этот удивительный ответ, это должно работать:

// 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');
    });

Answer 2

использовать html2canvas.js

var canvas = document.querySelector("canvas");
document.querySelector("button").addEventListener("click", function() {
        html2canvas(document.querySelector("body"), {canvas: canvas}).then(function(canvas) {
            console.log('Drew on the existing canvas');
        });
    }, false);

canvas { border: 1px solid black;}
button {clear: both;display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/v0.5.0-beta4/html2canvas.js"></script>

<canvas width="500" height="200"></canvas>
<button>Run html2canvas</button>