javascript - HTML2Canvas 在 jspdf 上生成模糊图像

Question

当我在我的代码中使用 html2canvas 时，当我将它放到 jspdf 上时，它会生成一个模糊的图像。

比较图像：

HTML 格式
[![HTML 格式][1]][1]

生成的模糊图像
[![生成的模糊图像][2]][2]

分辨率在我正在从事的项目中至关重要，我在互联网上尝试了许多解决方案。

这是我的参考代码：

async function generatePDF() {
    //A4 measures 210 × 297 millimeters or 8.27 × 11.69 inches. In PostScript, its dimensions are rounded off to 595 × 842 points
    var doc = new jsPDF('l', 'mm', 'a4');
    const width = 297;

    document.getElementById("hidden").style.display = "block";
    document.getElementById("hidden").style.width = (width + 100) + "mm";
    var stringHTML = document.getElementById("hidden").getElementsByClassName("calendarBox");

    for (var i = 0; i < stringHTML.length; i++) {
        stringHTML[i].style.display = "block";
        window.scrollTo(0, 0);

        await html2canvas(stringHTML[i], {
            useCORS: true,
            width: 1800
        }).then((canvas) => {
            var imgData = canvas.toDataURL();
            doc.addImage(imgData, 'PNG', 12, 10, width * 1.1, width * 0.65);
        });

        if (i + 1 != stringHTML.length) {
            doc.addPage();
        }
        stringHTML[i].style.display = "none";
    }

    doc.save('Calendar.pdf');
    document.getElementById("hidden").style.display = "none";
}

Please help. I've spent many hours trying to fix.
Thanks


  [1]: https://i.stack.imgur.com/go1vD.png
  [2]: https://i.stack.imgur.com/80h0k.png
  [3]: https://i.stack.imgur.com/oZcnv.png

标签： javascripthtmlcanvasjspdfhtml2canvas