jsPDF.html方法无法识别图像质量选项

Question

方法jsPDF.html()有一个设置image质量的选项(HTMLOptionImage(，但这似乎根本不会影响图像质量或不可避免地影响文档大小。

我的目标是将PDF文档的大小降到一个合理的水平，但每当我添加图像时，它都会将其炸得比需要的大得多。就像文档上一个50kb的图像文件也会将其变成1MB的PDF一样。

似乎compress并没有真正影响它，PDF的大小也是一样的。

使用外部映像的示例代码(可能必须在本地运行(。

package.json正在运行"；反应"："17.0.2〃；，以及"；jspdf"："2.3.1"；，

import { jsPDF } from "jspdf";
const stackoverflow = () => {
function downloadMe() {
const ele = document.querySelector('#stackoverflowexample');
const pdf = new jsPDF({
orientation: 'p',
unit: 'px',
format: 'letter',
compress: true,
putOnlyUsedFonts: true,
hotfixes: ['px_scaling'] // an array of hotfix strings to enable
});
pdf.html(ele, {
image: { quality: 10, type: "jpeg" },
x: 10,
y: 10,
callback: function (doc) {
doc.save(); // File size is huge even though images are small kb
// attachment = doc.output('datauristring');
},
});
}
return (
<div id="stackoverflowexample">
<h1>PDF</h1>
<button onClick={downloadMe}>Download Button</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Borobudur-Temple-Park_Elephant-cage-01.jpg/320px-Borobudur-Temple-Park_Elephant-cage-01.jpg" />
<p>Image makes PDF larger than it should have to be</p>
</div>)
}
export default stackoverflow;

Answer 1

因此，我可以通过使用addImage选择性地删除和重新添加这些图像元素来解决这个文件大小问题，但这并不能解决.html方法夸大img元素数据大小的根本问题。

html2canvas: {
onclone: (doc) => {
let target = doc.querySelector("#stackoverflowexample");
let images = target.querySelectorAll("img");
let targetRect = target.getBoundingClientRect();

images.forEach((img) => {
let rect = img.getBoundingClientRect();
pdf.addImage(img, "JPEG", targetRect.x - rect.x, targetRect.y - rect.y, rect.width, rect.height);
img.remove();
});
}

Answer 2

图像对象有一个乘数属性，尝试使用它，它会影响图像的质量，这将导致文件大小的增加或减少，这取决于您设置的乘数值

image: { quality: 10, type: "jpeg", multiplier: .5 }