ScreenShot網頁

Question

我有一個網頁，其上實現了jorgchart，它在網頁的邊界上垂直和水平延伸並顯示滾動條，這很好。但是，當我們採取同樣的快照，它給網頁，但完整的DIV/canvas.Can有人請建議的唯一可見的區域的快照...

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

使用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>