截图网页答案

【问题标题】：ScreenShot webpage截图网页
【发布时间】：2017-09-16 04:14:58
【问题描述】：

我的网页上实现了 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');
    });

【问题讨论】：

标签： javascript jquery html2canvas orgchart

【解决方案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');
    });

【讨论】：

【解决方案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>

【讨论】：