[英]Javascript function stops working when image added
I'm trying to make a pdf generation tool and it works except when i'm adding a picture to div.encabezado I've tried using other elements like a div with inline background image and i also tried with it's own section but everytime i get it to look like i need it stops generating the pdf.我正在尝试制作一个 pdf 生成工具,它可以工作,除非我将图片添加到 div.encabezado让它看起来像我需要它停止生成 pdf。 I know the code is right cause if i change or uncomment the image src or change the div id it will work properly
我知道代码是正确的,因为如果我更改或取消注释图像 src 或更改 div id,它将正常工作
<style>
/* Style the header */
header {
background-color: #fff;
text-align: center;
font-size: 35px;
color: black;
height:15%;
}
div.encabezado{
backgroundImage: url("sgh.png");
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
function getPDF(){
var HTML_Width = $(".canvas_div_pdf").width();
var HTML_Height = $(".canvas_div_pdf").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width+(top_left_margin*2);
var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
html2canvas($(".canvas_div_pdf")[0],{allowTaint:true}).then(function(canvas) {
canvas.getContext('2d');
console.log(canvas.height+" "+canvas.width);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
}
pdf.save("HTML-Document.pdf");
});
};
</script>
<div class="canvas_div_pdf">
<div id="encabezado">
//<image src="sgh.png">
</div>
<section>
<div style="height:120px;width:120px;border:1px solid;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
<div style="height:120px;width:120px;border:1px solid;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
</section>
<footer>
<p>Footer</p>
</footer>
<button onclick="getPDF()">Click me</button>
</div>
You can try to add this option to the html2canvas options:您可以尝试将此选项添加到 html2canvas 选项中:
foreignObjectRendering: true
You can find more details here: https://html2canvas.hertzen.com/configuration/ Also, check this other article: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image which may help you understand what is happening.您可以在此处找到更多详细信息: https://html2canvas.hertzen.com/configuration/另外,请查看其他文章: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image这可能会有所帮助你明白发生了什么。
In addition, if you are testing this locally check your web server configuration and cors settings.此外,如果您在本地进行测试,请检查您的 web 服务器配置和 cors 设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.