Html2canvas: ForeignObjectRendering not rendering images and fonts since 1.0.0 rc2

[matteosaporiti]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• [x] You are using the latest version
• [x] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

Between version 1.0.0 rc1 and 1.0.0 rc2 html2canvas stopped being able to include fonts and images in a saved screenshot with ForeignObjectRendering set as true.
In the network tab I can see the fonts and the images being fetched but they are not included in the final result.
This is the code that I'm using:

        html2canvas(document.querySelector("#capture"), {foreignObjectRendering: true, logging: false, proxy: '/proxy'}).then(canvas => {
            download(canvas.toDataURL('image/png'), "screenCapture.png", "image/png"); //download.js used here
        });

Specifications:

• html2canvas version tested with: 1.0.0 rc1, 1.0.0 rc2, 1.0.0 rc5
• Browser & version: Chrome 77 and Firefox 69
• Operating system: Windows 10 build 1903

[mrcw]

Yes, if ForeignObjectRendering is configured as true, images are not working (local or not)... this is a mayor bug.

I've made an online example for this: https://playcode.io/482330?tabs=index.html,preview,console

[mikr96]

Hey guys, there is a workaround to this issue, just simply convert the image to base64 format. The package couldn't render images but it can draw. Besides base64, you can also try svg format. Hope this helps!