Search code examples
htmlcanvastextboxrenderhtml2canvas

Html2canvas do not render textbox fields

My screen captured canvas do not show any texts on my textboxes and do not show the selected field in my dropdown. This is the Screenshot Screen capture here

This is the script I am using

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

It should have datas that i Inserted in the textboxes. as seen on the graph below. This is the code for my html2canvas

function screenshot() {
        html2canvas(document.body, {
            scrollY: -window.scrollY,
            crossOrigin: 'Anonymous',
            allowTaint: true,
            foreignObjectRendering: true,
        })
            .then(canvas => {
                imageData = canvas.toDataURL();
                console.log('Result from imageData', imageData)
                submissionData = prepData(imageData);
                JFCustomWidget.sendData(submissionData);
            })
            .catch(er => console.error(er));
    }
Solution

  • Having the same issue in a Vue project with Vuetify. Turns out that the issue has to do with foreignObjectRendering: true. Set it to foreignObjectRendering: false and the text will appear. At least that's my solution.

    Downside: the quality of the image decreases, depending of the elements you render. E. g. shadows look pretty awful.