JsPdf получает только один элемент изображения png вместо всех элементов

Я запутался в использовании jsPdf и Html2canvas. У меня есть некоторая страница, как эта, https://i.stack.imgur.com/gspxL.png[1]. И мне нужно загрузить все элементы на странице, кроме видео. Он уже работает, но вместо печати всего элемента, он берет только часть обрезанного изображения лица, как например это [https://i.stack.imgur.com/u10vS.png]

Я использую jspdf с html2canvas. И вот код для страниц

<div class="container">
<a class="nav-link" href="{%url 'kepalsuan:home'%}">
    <div class="logo text-center mt-1 mb-3"><img src="{% static 'images/logo1.png'%}" alt="Logo"></div>
</a>
<hr />
<div class="result text-center">
    <div id="printedPart">
        <!-- <h3>Play to see the Result!</h3> -->
        <h2>It Takes <span style="font-size:40px;font-weight:600;">{{ duration }}</span> seconds to detect It!</h2>
        <div class="hasilakhir mt-3">
            {%if output == "REAL" %}
            <img src="{% static 'images/realstamp.png'%}" alt="real" height="100px" width="auto" style="float:left; padding-left:350px;">
            <h1 id="realaccuracy" style="color:green; float:right; padding-right:400px; padding-top:20px;">{{ confidence }} %</h1>
            {%else%}
            <img src="{% static 'images/fakestamp.png'%}" alt="fake" height="100px" width="auto" style="float:left; padding-left:350px;">
            <h1 id="fakeaccuracy" style="color:red; float:right;padding-right:400px;padding-top:20px;">{{ confidence }} %</h1>
            {%endif%}
        </div>
        <hr>
        <!-- <h1 class="mx-auto mt-5" style="font-weight:900;">Result</h1> -->
        <h3 style="margin-top:125px;">Face Cropped Frames</h3>
        <div id="faces_images" class="col-12 mb-2">
            {% for each_image in faces_cropped_images %}
            <img src="{%static each_image%}" class="faces" width="auto" height="150" /> {%endfor%}
        </div>
    </div>
    <video height="320" width="640" id="predict-media" controls>
  <source src="{{MEDIA_URL}}{{original_video}}" type="video/mp4" codecs="avc1.4d002a" />
    </video>
</div>
<div class="text-center">
    <a class="btn btn-warning mt-5 btn-lg" href="javascript:downloadResult()" style="color:white;font-weight: 700;">Download Result!</a>
</div>

А это код для функции pdf

var div = document.querySelector("#printedPart")

function downloadResult() {
    var imgData;
    html2canvas($("#printedPart"), {
        useCORS: true,
        onrendered: function(canvas) {
            imgData = canvas.toDataURL('image/png');
            var doc = new jsPDF('l', 'px', 'a4');
            doc.addImage(imgData, 'png', 10, 200);
            doc.save('kepalsuan_reports.pdf');
        }
    });
};

Может ли кто-нибудь помочь мне сделать это? Мне нужно показать его для моего последнего теста в колледже на следующей неделе, большое спасибо.

Вернуться на верх