html2canvas 产生模糊的图像

Question

I'm using html2canvas and jspdf to create pdfs from a html page. But they produce a blurry image.

I already tried increasing scale and dpi, this didn't change much.

Here is the code for converting the html to a picture:

   html2canvas(document.body, {
        // Scale image for better quality
        scale: 5,
        dpi: 300,
        onrendered: function (canvas) {
            // Convert image to dataURL
            const image = canvas.toDataURL("image/png");
            // Save dataURL in session storage
            try {
                window.sessionStorage.setObject(new Date().getTime(), image);
                document.getElementById('status').innerHTML = "Aktuelle Kennzahl erfolgreich hinzugefügt!"
            } catch (error) {
                console.log(error);
                document.getElementById('status').innerHTML = "Fehler beim Hinzufügen der Kennzahl!"
            }
        }
    });

And for creating the pdf:

    let doc = new jsPDF('p', 'mm', 'a4');

    // Set image width to a4
    const width = doc.internal.pageSize.getWidth();
    const height = doc.internal.pageSize.getHeight();

    doc.addImage(image, 'PNG', 0, 0, width, height * 0.65, '', 'SLOW');
    doc.addPage();

Answer 1

I use 1.0.0-alpha.12 version. I use html2canvas download image, but this picture has a white transparent mask. Finally, I found if I set {backgroundColor: null} or other color, this problem disappear and picture is clear.

html2canvas(element, {
    backgroundColor: '#1b2b4e'
    }).then(canvas => {

})