图像不适合 PDF 文档。使用jspdf答案

【问题标题】：Image is not fitting in PDF document. Using jspdf图像不适合 PDF 文档。使用jspdf
【发布时间】：2022-02-08 03:46:07
【问题描述】：

这是我正在使用的代码。我的图像很大。有没有办法根据jspdf中的图像大小增加页面大小？

      var doc = new jsPDF("l", "in", [672, 800]);
      var imgData = canvas.toDataURL("image/png", 1.0);
      doc.setFontSize(40);
      doc.addImage(imgData, "JPEG", 10, 10, 200, 400);
      doc.save("Report.pdf");
    }); ```

【问题讨论】：

标签： javascript jspdf html2canvas

【解决方案1】：

图像将适合您放置的任何位置，但会受到页面大小的限制，因此我将页面设置为 25"x25"（63.5 厘米 x 63.5 厘米），一旦设置该页面，图像就可以拉伸（或完全收缩）到那个大小）

放置比率决定了在任一方向上看到多少拉伸或收缩。需要为 PDF 图像渲染预先确定两组单位和比率（页面和页面对象）的选择。

var imgData1 = 'data:image/jpeg;base64,/9j/... image is too big for SO ...';


var doc = new jsPDF("l", "pt", [1800, 1800]);

// Build page 1
doc.setPage(1);
doc.setFont('helvetica', 'italic');
doc.setFontSize(40); //Font is Points e.g. 40 pt total but say 4 pt below baseline so set 36 pt down !
doc.text('I am a top left heading on page 1', 0, 36);

// The image is only 500 x 500 pixels (say 1" x 1" @ 500 dpi)
// but lets place it as wide as the page 1800 pts and say 400 pts high.

doc.addImage(imgData1, 'JPG', 0, 50, 1800, 400, "A 500 x 500 pixel Limousine Cat", "none", 0);
doc.addImage(imgData1, 'JPG', 0, 500, 72, 72, "A Postage Stamp Cat", "none", 0);

doc.save('Report.pdf');

注意图像是 1" x 1"，现在看起来拉伸到 25" 在 PDF 中它仍然只有 500x500 无单位像素，所以当以 96dpi 提取时，它将被声明为 5.208333。 ." x 5.208333.." 因此以 500dpi 提取以将其返回到邮票中。

重点是您事先设置好像素在 PDF 比例和图像宽高比方面的使用方式（忘记每英寸点数的普通非 PDF 概念）。

【讨论】：