HTML2Canvasは完全なdivを表示せず、画面に表示されるものだけを表示しますか？

Question

私はHTML2Canvasを使ってdivの内容をレンダリングしようとしています。それだけで、画面上に表示されているものをレンダリングし、

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

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

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

}); 

このコードが実行されると、私はv5のベータ3

を使用しています：ここではコードです。 #potenzial-page divは基本的にページ全体で、ヘッダーとフッターを除いたものです。このdivのすべてのコンテンツはスクロールで表示されます（非表示の要素がいくつかありますが、画像に非表示の要素を表示したくない）。また、画像はdivと同じ高さで、部分的にしか見えないように見えます。

左がHTML2Canvasはdiv要素をレンダリングする方法である。

は、私が何を意味するかの例を与えるために、ここでの比較です。右は、上のコードを実行したときのレンダリング方法を示しています。右の画像は、ブラウザの画面に表示される画像です。

私はheightオプションを追加しようとしましたが、違いはありません。

UPDATE

私は、ページの最上部までスクロールすると、それが必要としてスクリプトを実行するには、全体のdivをレンダリングします。

トップにスクロールせずにdivをレンダリングするにはどうすればよいですか？

Answer 1

あなたはこのソリューションをSOで見たことがありますか： "Html2canvas converting overflowed content to image" オーバーフローを表示に設定してレンダリングし、オーバーフローを隠して回避策を提案します。私のために働いた

Answer 2

ソリューションは、私のCSSに以下を追加しました：

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

これは、（デフォルトのようです）表示可能領域へのレンダリングを制限するからhtml2canvasを防ぐことができます。

はこちらをご覧ください：https://github.com/niklasvh/html2canvas/issues/117