Question

我正在使用html2canvas和jspdf从html页面创建pdf。但是它们会产生模糊的图像。

我已经尝试过增加比例和dpi，但变化不大。

以下是将html转换为图片的代码：

   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!"
            }
        }
    });

对于创建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

我使用1.0.0-alpha.12版本。我使用html2canvas下载图像，但是此图片具有白色透明蒙版。最终，我发现是否设置了{backgroundColor：null}或其他颜色，该问题消失了，图片清晰了。

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

})

html2canvas产生模糊图像

1 个答案: