ScreenShot 웹 페이지

Question

나는 웹 페이지의 한계를 넘어 가로 및 세로로 확장되어 스크롤러를 보여주는 jorgchart가 구현 된 웹 페이지를 가지고 있습니다. 우리는 같은의 스냅 샷을 때, 그것은

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를 사용하여 웹 페이지 있지만 전체 사업부가/canvas.Can 누군가가 제안 해주십시오의 가시 영역의 스냅 샷을 ... 줄이 작동합니다 :

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