zrzut ekranu html2canvas przechwytywanie bieżącego okna, nie całego ciała

Question

Próba przechwycenia zrzutu ekranu całego ciała strony (w tym pól wypełnionych przez użytkownika) w javascript, ale html2canvas przechwytuje tylko bieżące okno, nawet gdy ustawię wysokość do ogromnej liczby. Przykłady witryny html2canvas wydają się mieć pożądaną funkcjonalność, ale nie jestem w stanie zrozumieć, co robią inaczej.

<button id="pdfbutton" type="button">Click Me!</button> 

<script type="text/javascript"> 
$("#pdfbutton").click(function() { 
    html2canvas(document.body, { 
     onrendered: function(canvas) { 
      // document.body.appendChild(canvas); 
      var img = canvas.toDataURL("image/png"); 
      console.log(img); 
      document.body.appendChild(canvas); 

     } 
     // height: 10000 
    }); 
}); 
</script> 

Proszę dać mi znać, czy są jakieś inne sposoby, aby wykonać zrzut ekranu na kliknięcie przycisku w javascript (bez wstawiania URL, ponieważ użytkownik wypełnia pola na mojej stronie).

Answer 1

Rozwiązano ten problem, usuwając atrybut stylu (wysokość, położenie), który nie jest obsługiwany przez html2canvas i dodawanie go po przechwyceniu zrzutu ekranu. W moim przypadku stanąłem przed problemem z pozycją.

$('.element').css('position','initial'); // Change absolute to initial 
    $my_view = $('#my-view'); 
    var useHeight = $('#my-view').prop('scrollHeight'); 
    html2canvas($my_view[0], { 
    height: useHeight, 
    useCORS: true, 
    allowTaint: true, 
    proxy: "your proxy url", 
    onrendered: function (canvas) { 
     var imgSrc = canvas.toDataURL(); 
     var popup = window.open(imgSrc); 
     $('.element').css('position','absolute'); 
    } 
    }); 

Spowoduje to zrzut ekranu całego ekranu z przewijaną częścią. check this solution

Answer 2

Html2Canvas ma problem, który zmusza go do renderowania elementu z górnej granicy okna. Możesz rozważyć przewijanie do góry elementu.

Drugi problem to obsługa przepełnienia. Ustaw overflow: visible na elemencie nadrzędnym i usuń go po wyeksportowaniu.