截屏网页

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

Answer 2

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

javascript

jquery

html2canvas

orgchart