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

【问题标题】：How do I properly set the image size in jsPDF so that the image isn't blurry?如何在 jsPDF 中正确设置图像大小以使图像不模糊？
【发布时间】：2020-09-23 20:28:06
【问题描述】：

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

这是生成的 PDF 的样子

我试过告诉 jsPDF 图片是 160x60 像素，但它实际上是 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 值。

【问题讨论】：

标签： javascript pdf jspdf

【解决方案1】：

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

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

HackbrettXXX 在那里链接了一个 comment，这也是相关的：

正如您在此处看到的，scaleFactor 设置为固定值 1pt = 96/72 px。它不考虑设备 PPI/DPI。这种行为是“正确的”，因为我们可以说 PDF 是一种打印媒体，而 CSS 将打印媒体的像素比设置为 1px = 1/96in

【讨论】：