ScreenShot webpage

Question

I have webpage which has jorgchart implemented on it which is extending vertically and horizontally over limits of webpage and showing scrollers,thats fine. But when we take snapshot of the same, it give snapshot of only visible area of webpage but complete div/canvas.Can someone please suggest...

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

score 1 · Accepted Answer · answered Sep 16 '17 at 04:31

Using this awesome answer, this should work:

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

Farhad Bagherlo · Answer 2 · 2017-09-16T06:07:42.130

use 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>

ScreenShot webpage

2 Answers2