HTML2Canvas nie renderuje pełnego div, tylko to, co jest widoczne na ekranie?

Question

Próbuję użyć HTML2Canvas do renderowania zawartości elementu div. Oto kod:

var htmlSource = $('#potenzial-page')[0]; 

$('#btn').on("click", function() {   

    html2canvas(htmlSource).then(function(canvas) { 
     var img = canvas.toDataURL(); 
     window.open(img); 
    }); 

}); 

Używam v5 beta 3.

Gdy ten kod działa, to tylko czyni to, co jest widoczne na ekranie. Element div #potenzial-page jest zasadniczo całą stroną, bez nagłówka i stopki. Cała zawartość tego elementu div jest widoczna po przewinięciu (są pewne ukryte elementy, ale nie chcę, aby ukryte elementy były widoczne na obrazie).

Nie mogę znaleźć błędu lub dlaczego nie zostanie zapisany cały element div. Powinienem również zauważyć, że wygląda na to, że obraz jest tak wysoki jak div, ale tylko częściowo widoczny.

Aby dać przykład o co mi chodzi, o to porównanie:

Lewica jest jak HTML2Canvas powinien uczynić div. Po prawej pokazuje, jak się wyświetla, gdy uruchamia powyższy kod. Odpowiedni obraz jest widoczny na ekranie mojej przeglądarki.

Próbowałem dodać opcję height, ale nie ma to znaczenia.

UPDATE

Gdybym przejść do samej górze strony następnie uruchomić skrypt będzie to czyni całą div tak jak powinno.

Jak wyrenderować element div bez konieczności przewijania do góry?

Answer 1

Czy widziałeś to rozwiązanie w SO: "Html2canvas converting overflowed content to image" Proponowane rozwiązanie obejścia problemu z ustawieniem przepełnienia na widoczne, a następnie renderowaniem, a następnie przepełnienia ukryte.

Answer 2

Rozwiązanie że pracował dla mnie było dodanie następujących do mojego CSS:

.html2canvas-container { width: 3000px !important; height: 3000px !important; } 

Zapobiega html2canvas z ograniczeniem rendering do obszaru widocznego (co wydaje się być domyślnie).

Zobacz tutaj: https://github.com/niklasvh/html2canvas/issues/117