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');
}
});
};
Может ли кто-нибудь помочь мне сделать это? Мне нужно показать его для моего последнего теста в колледже на следующей неделе, большое спасибо.