javascript - html2canvasで現在のウィンドウをスクリーンショット、ページ全体ではなく

JavaScriptでページ全体のスクリーンショット（ユーザーが入力したフィールドも含む）をキャプチャしようとしていますが、html2canvasは現在のウィンドウしかキャプチャせず、たとえ高さを非常に大きな数値に設定しても同じです。html2canvasのウェブサイトの例では、私が望む機能があるように見えますが、彼らが何を違うようにしているのか理解できません。

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

JavaScriptでボタンクリック時にスクリーンショットを取得する他の方法があれば教えてください（URLを挿入せずに、ユーザーが私のページのフィールドを入力するため）。

回答 #1

html2canvasでサポートされていないstyle属性（height、position）を削除し、スクリーンショットを取得した後に追加することで、この問題を解決しました。私の場合はpositionに問題がありました。

  $('.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');
    }
  });

これはスクロール可能な部分を含む画面全体のスクリーンショットを撮ります。この解決策を確認してください

回答 #2

Html2Canvasには、要素を最上位ウィンドウの境界からレンダリングするよう強制する問題があります。要素の上部までスクロールすることを検討してください。

2つ目の問題はオーバーフローの処理です。親要素にoverflow: visibleを設定し、エクスポート後にそれを削除します。