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 והוספתו לאחר לקיחת הצילום מסך. במקרה שלי נתקלתי בבעיה עם המיקום.

  $('.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 יש בעיה שמאלצת אותו להציג אלמנט מגבול החלון העליון. ייתכן וכדאי לשקול לגלול אל פסגת האלמנט.

הנושא השני הוא טיפול בעודף תוכן. קבע overflow: visible על האלמנט האב והסר אותו לאחר הייצוא.