[Solved] Failed to apply font family when saving image with html2canvas

Hello bro

I faced this problem that html2canvas font-family is not working (｡•́︿•̀｡)

In my case...

 

[Problem]

Failed to apply font family when saving image with html2canvas

 

[Solution 1]

I use the latest version of html2canvas.

=> There is news that the bug has been fixed.

 

[Solution 2]

I used CORS and allowTaint Option.

=> I annotated these and they worked !!

function test(){
    html2canvas(document.getElementById('printDiv'), {
        //allowTaint: true,
        //useCORS: true,
        //foreignObjectRendering: true,
    }).then(canvas => {
        var fileNm = Math.random();
        downloadURI(canvas.toDataURL(), "myImage.png");
    });
}

function downloadURI(uri, name){
    var link = document.createElement("a")
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
}

 

I hope this experience will help you.

reference : https://html2canvas.hertzen.com/