Javascript function stops working when image added

Question

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. I know the code is right cause if i change or uncomment the image src or change the div id it will work properly

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

Answer 1

You can try to add this option to the html2canvas options:

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.

In addition, if you are testing this locally check your web server configuration and cors settings.