HTML2CANVAS Error - Uncaught (in promise) DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D'

Viewed 7

I`ve been trying to run the following code to export 7 DIVs into a PDF. However I have been getting the following error (in Chrome console):

Uncaught (in promise) DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:181816
    at https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:1976
    at Object.next (https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:2081)
    at https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:1463
    at Object.next (https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:2081)
    at https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:1023
    at new Promise (<anonymous>)
    at a (https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:774)
    at Ds.renderBackgroundImage (https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:180785)
    at Ds.<anonymous> (https://html2canvas.hertzen.com/dist/html2canvas.min.js:20:186005)

The strange thing is that this code did work a few times in my other laptop, but stopped working after a while. In my friend`s laptop apparently it did work as well.

I have seen posts saying this is due to asynchronous code, but I'm not getting!

function save() {


  document.getElementById("status_etapa_3").className = "completo";
  document.getElementById("status_etapa_4").className = "atual";

$('html, body').animate({ scrollTop: 0 }, 'fast');



var d = new Date()
var pdf = new jsPDF('p', 'pt', 'a4');
var jornadas = document.getElementsByClassName('jornada_container')
var page_height = pdf.internal.pageSize.getHeight()
var remaining_height = page_height
var y = 0
var adjusted_height = 0
var lenght = jornadas.length



for (let i = 0; i < jornadas.length; i++) {
    
    
html2canvas(jornadas[i]).then(function(canvas) {

    adjusted_height = (jornadas[i].offsetHeight*(pdf.internal.pageSize.getWidth()/jornadas[i].offsetWidth))

    if((y+adjusted_height) > pdf.internal.pageSize.getHeight()){
    pdf.addPage()
    y = 0
}
    
    imgData = canvas.toDataURL('image/jpeg', 1.0)
    pdf.addImage(imgData, "JPEG", 0, y, pdf.internal.pageSize.getWidth(), adjusted_height)

    console.log(i + " " + lenght)

    y = y + adjusted_height + 10

    if((i+1) == lenght){
            pdf.save('Infracommerce_Escopo_Executivo_' + d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate())
    }
    
})}


}

Does anyone have any idea?

Thank you in advance!!

0 Answers
Related