Javascript 如何在jsPDF中正确设置图像大小,使图像不';不模糊?

Javascript 如何在jsPDF中正确设置图像大小,使图像不';不模糊?,javascript,pdf,jspdf,Javascript,Pdf,Jspdf,我试图在我用jsPDF生成的PDF中包含一个图像,但是图像模糊了。我怎样才能避免这种情况并获得清晰的图像 这就是生成的PDF的外观 我试着告诉jsPDF图像是160x60px,但实际上是285x107像素。此外,jsPDF说该页面的宽度为446.46像素。但如果我测量屏幕截图,它实际上是793像素宽。这是怎么回事 这是我正在运行的代码(以便您可以随意使用) 函数pdf(){ const{jsPDF}=window.jsPDF; 常数imgData="数据:图片/png;base64,Ivbor

我试图在我用jsPDF生成的PDF中包含一个图像,但是图像模糊了。我怎样才能避免这种情况并获得清晰的图像

这就是生成的PDF的外观

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

这是我正在运行的代码(以便您可以随意使用)

函数pdf(){
const{jsPDF}=window.jsPDF;
常数imgData="数据:图片/png;base64,Ivborw0KggoaaaAnsuhueugaaaaaaaaaaaaaaaaaaxaxnsr0iars4c6qaaarnqa1cxjwv8yquaaaazuexuqb/DtjY2CZF9wAm/6kr4ykr5wbriw87dx81fp8abhpbm2+wAu6QA+ugbosqbbbqa10ysbq2kaaajcehzcjaadmaa7dadvqqqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqaqa2.这些研究结果表明,这些研究结果是一个非常有用的研究结果。一个研究结果是一个非常有影响力的研究者。他们是一个非常有影响力的研究者。他们是一个非常有影响力的研究者。他们是一个非常有影响力的研究者。他们是一个非常有影响力的研究者。他们是一个非常有影响力的研究者。他们是一个非常有可能是一个非常有可能是一个非常有可能的研究背景的一个研究。一个非常有可能是一个非常大的。他们是一个关于一个非非政府军军军军的一个非政府的一个非政府,一个非政府军的非政府,一个非政府军。一个非政府军军军军军的非政府的非政府,或者是一个非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府的非政府军V9DWTWNB8PVUYKP6UTN4OUDQFLUIK2)b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b CO6TGYVS55QEAVxVD2MmeBBU6Ce22BLA6.中国的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市,一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市的一个城市,一个城市的BBVVVVVVVVVVVBBBBBBBBBB8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 aaaasuvork5cyii=“;
常数imgWidth=160;
常数imgHeight=60;
常数裕度=40;
const doc=新的jsPDF(“p”、“px”、“a4”);
const pageWidth=doc.internal.pageSize.getWidth();
日志(“页面宽度”,页面宽度);
addImage博士(
伊姆格达塔,
“巴布亚新几内亚”,
pageWidth/2-imgWidth/2,
边缘
imgWidth,
伊姆盖特
);
文件保存(“img.pdf”)
}
如何使图像以160x60 px的实际大小进行渲染,使其不模糊

编辑:

知道生成的pdf实际上是793像素宽,通过执行
pageWidth/793
,我可以计算系数jsPDF是错误的。如果我使用该系数来缩放图像的宽度和高度参数,它将正确显示

const imgWidth=160*pageWidth/793;
常数imgHeight=60*pageWidth/793;
addImage博士(
伊姆格达塔,
“巴布亚新几内亚”,
pageWidth/2-imgWidth/2,
边缘
imgWidth,
伊姆盖特
);


但我担心这会在其他设备上出现问题。可能像具有不同DPI的设备一样。我想要一个更健壮的实现,它不依赖于我的magic 793值。

启用
px\u缩放
热修复程序使其按预期工作

另请参见本期GitHub中的讨论:

HackbrettXXX链接了一个与此相关的链接:

正如您在这里看到的,scaleFactor被设置为1pt=96/72 px的固定值。它不考虑设备PPI/DPI。这种行为是“正确的”,因为我们可以认为PDF是一种打印介质,CSS将打印介质的像素比设置为1px=1/96 in