如何在 jsPDF 中正确设置图像大小以使图像不模糊？

Question

我试图在使用 jsPDF 生成的 PDF 中包含图像，但图像模糊不清。我怎样才能避免这种情况并获得清晰的图像？

这是生成的 PDF 的样子

我试过告诉 jsPDF 图像是 160x60px，但它实际上是 285x107 像素。此外，jsPDF 表示页面宽度为 446.46 像素。但如果我测量屏幕截图，它实际上是 793 像素宽。这是怎么回事？

这是我运行的代码（jsfiddle link 这样你就可以随意使用它）

function pdf() {
  const { jsPDF } = window.jspdf;
  
  const imgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAA8CAMAAADWtUEnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAzUExURQB/DtjY2CZF9wAm/6Kr4YKR5wBRiWl87DxX81Fp8ABHpBM2+wAu6QA+ugBoSQBbbQA10ySBQ2kAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANaSURBVGhDzVeBkqswCKymVq3ttf//tY+FkETROzqvM8iMtwKbLcZIcpfzWyd2WnQTo9BNjEI3MQrdxCh0E6PQTYzC85tWelZ0E6PQTYxCNzEK3cQodBOj0E2MwvObVmqwT1dGsYpDgt2K33UjAlP1/0JRGIvfKhi+CQjMGLFX4B0JWPYp3reRLd8iS8OyT9YoGL4VyM9DQjsFLiktfFPjeaavktjwLWaFNg4FQlYwfBOga+EBewWm9GBs4nMaGEl/ZhQ7QvuA9EOkAB8KW/4va3CnwCXNhpd6wa6bdl/RGklBbpo4K7BPChv+ZwXOO094kwmEP2Ddb/NrnNOdsY2PrMA+KZhxJlDQFohH3fKe+Ws5yq8x9TbOE3+cP7Z7+sl32W7ple8ae7/zDdn7IfjiT5ITT769cfgDhda0UoNmBvvt1wd7yBJkH3MBlD7HiYlv9dWTwnb8pVuYKP6UTN4OUDQFLuikb/wgJTT+aBq0Foi7JyP5s1TKcVJAW4KCjqcCmwb9XwWiCcjcYHY0vjeDZLksrFF5AsShIK+fFgBHEf/aDF7TdM3CtC1p/KBA2nE40bdtRRQ43myNXytwSNOSBvHH9GI8LvAyoiP3q7YiCuLX9vTFArHas9/rKzosEPxl3degUA4ZvQz86ivG28n+TLWwHReIesoDMUKh+Fnh7wIPzfTB1ARKsu1cmy6Gb2Et8akCm1ZqcDuD9Hh1Kysz+GSWxJsZxukmXen6UR9/SKHkywxOze/s7SR6Y9AUSGu8+LOeal6omozz9MUq/0eOk0k/Co6TguYvs55qeAvXvD2MmEBBU6Ce22BLacSyhBDvMSc5T+tPbh71MEHW1xmV/ow4K3CeFPL4iiZQ0BY4UOcQfypthtoJV4BTST0PjvXcSF8yI3tDiT9r4ayAPBSEp3xCEyhoC6S6eAZoadVXRY/NhbVbGvVAkxeXFKAKBQkgDgYhK9RxGU2ALtnh1SCoec3UrY6QDvFs6tOvw7jePKAsDZo5sbrVkTUKja6gCdB1XCBWPVl+JTAg/xtUt7RfC7xkhXZ8q7COE57ftNKzopsYhW5iFLqJUegmRqGbGIVuYhSe37TSs6KbGIVuYhS6iVHoJkahmxiFbmIUnt+00rOimxiFbmIIdt0/eH4pjf9qBVQAAAAASUVORK5CYII=";
  const imgWidth = 160;
  const imgHeight = 60;
  const margin = 40;
  const doc = new jsPDF("p", "px", "a4");
  const pageWidth = doc.internal.pageSize.getWidth();
  console.log("pageWidth", pageWidth);
  
  doc.addImage(
    imgData,
    "PNG",
    pageWidth / 2 - imgWidth / 2,
    margin,
    imgWidth,
    imgHeight
  );
  
  doc.save("img.pdf")
}

如何使实际尺寸为 160x60 像素的图像呈现不模糊？

编辑：

知道生成的 pdf 实际上是 793 像素宽，我可以通过 pageWidth / 793 计算出 jsPDF 错误的因素。如果我使用这个系数来缩放图像的宽度和高度参数，它会正确显示！

  const imgWidth = 160 * pageWidth / 793;
  const imgHeight = 60 * pageWidth / 793;
  
  doc.addImage(
    imgData,
    "PNG",
    pageWidth / 2 - imgWidth / 2,
    margin,
    imgWidth,
    imgHeight
  );

但我担心这会在其他设备上中断。就像具有不同 DPI 的设备一样。我想要一个不依赖于我神奇的 793 值的更健壮的实现。

Answer 1

启用 px_scaling 修补程序使其按预期工作。 https://github.com/MrRio/jsPDF/blob/master/HOTFIX_README.md

另请参阅本 GitHub 期中的讨论：https://github.com/MrRio/jsPDF/issues/2927

HackbrettXXX 链接 comment 那里也相关：

As you can see here, the scaleFactor is set to a fixed value of 1pt = 96/72 px. It does not factor in the device PPI/DPI. This behavior is "correct", since we can argue that PDF is a print medium and CSS sets the pixel ratio for print media to 1px = 1/96in

如何在 jsPDF 中正确设置图像大小以使图像不模糊？

How do I properly set the image size in jsPDF so that the image isn't blurry?

javascript

pdf

jspdf