Error in .html() method when element has background-image property

[ihor-hrechka]

I'm trying to add content from HTML element (with using .html() method) but getting html2canvas error.

Source HTML:

<div id="element-to-print" style="background: url('/Content/Images/page-template.png'); background-size: contain;"></div>

JS:

var doc = new jsPDF({ orientation: 'p', format: 'a4'  });
doc.html(document.getElementById('element-to-print'), {
   callback: function (doc) {
         doc.output('dataurlnewwindow');
   }
}

Error:

If remove css property background-image and background-size - everything works fine. What can be the reason?

Thank you in advance!

[Uzlopak]

hi,

well this is a bug. jspdf canvas has to get a attribute "ownerDocument" which should be a by reference link to document. Then probably it will break somewhere else :D

[andrescst]

Hey, I reproduce this on my local. I was able to solve the problem with the ownerDocument by editing the canvas.js file and creating a new object property on it. It seems to be working but the output PDF comes with a black figure with the sizes of the given image.

[andrescst]

Hey guys! Here is what I made to solve the undefined 'ownerDocument' on the canvas. https://github.com/andrescst/jsPDF/commit/c854d7b27a9a9296453560a109d22637cd6c2aee

When the background-image attribute from the HTML element to print is removed, the function "resizeImage" is not called because there is no image in the given element. However, I was not able to solve the problem with the output black figure. It seems to be a problem with an html2canvas update.

[JeffDerk]

Same issue here... can we expect a fix?

[HackbrettXXX]

We should probably add this fix to the next release.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[HanXHX]

I confirm the issue

[HackbrettXXX]

@andrescst could you prepare a pull request? We might also try updating to [email protected].

[andruts]

Hey, I have no longer access to @andrescst account but ill be happy to do it from this one.

[subourbonite]

@andruts @HackbrettXXX Is there a workaround or timeline for when this will be merged / fixed?

[HackbrettXXX]

@subourbonite a workaround would be to draw the background yourself. There is no timeline for a fix ATM. I personally don't have time for it currently. But any help is welcome.