PDF中的图像被裁剪：如何使画布完全适合PDF页面？

Question

使用 jspdf 库将画布放置在 PDF 中时，会导致图像被裁剪。

html2canvas(myContainer, {background: 'red'}).then (canvas) ->
  imgData = canvas.toDataURL('image/jpeg', 1.0)
  window.open(imgData) # this is just a test that opens the image in a new tab and it displays nicely, the entire image
  pdf = new jsPDF("l", "pt", "b1") # tried a variety of formats but no luck
  pdf.addImage(imgData, 'JPEG', 0, 0)
  pdf.save('file.pdf') # the generated pdf that contains the image gets trimmed

有人有什么想法可以让画布适应吗？

- Gustavo Matias

---

控制台有任何错误吗？ - user1693593

@KenFyrstenberg 没有错误。从将HTML制作成画布并将其放入PDF中，一切都很顺利，只是它不完全适合并且最终会像不关心一样剪切掉画布/图像的其余部分。 - Gustavo Matias

Answer 1

试着设置图片的宽度和高度（不管怎样，似乎对于addImage没有太多文档）：

var pdf = new jsPDF("l", "mm", "a4");
var imgData = canvas.toDataURL('image/jpeg', 1.0);

// due to lack of documentation; try setting w/h based on unit
pdf.addImage(imgData, 'JPEG', 10, 10, 180, 150);  // 180x150 mm @ (10,10)mm

- user1693593

---

你刚刚拯救了我的周末！ - Gustavo Matias

我已经在我的代码中尝试了，我正在使用纵向视图，设置了 var pdf = new jsPDF("p", "mm", "a4"); 和 pdf.addImage(imgData, 'JPEG', 10, 10, 150, 180); 但是它并没有起作用 :( 有什么建议吗？ - Blackjack

Answer 2

这是对我有用的解决方案，适用于我的使用情况：

var canvas = document.getElementById('canvas');
var imgData = canvas.toDataURL("image/png");
var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
var pdfWidth = pdf.internal.pageSize.getWidth();
var pdfHeight = pdf.internal.pageSize.getHeight();
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save("mypdf.pdf");

- LatentDenis

Answer 3

我可以为您提供解决方案：

function saveImageToPdf(idOfHtmlElement)
{
   var fbcanvas = document.getElementById(idOfHtmlElement);
   html2canvas($(fbcanvas),
        {

            onrendered: function (canvas) {

                var width = canvas.width;
                var height = canvas.height;
                var millimeters = {};
                millimeters.width = Math.floor(width * 0.264583);
                millimeters.height = Math.floor(height * 0.264583);

                var imgData = canvas.toDataURL(
                    'image/png');
                var doc = new jsPDF("p", "mm", "a4");
                doc.deletePage(1);
                doc.addPage(millimeters.width, millimeters.height);
                doc.addImage(imgData, 'PNG', 0, 0);
                doc.save('WebSiteScreen.pdf');
            }
        });
}

您需要做的事情包括：

1. 将像素转换为毫米。
2. 删除第一页没有正确调整大小的页面。
3. 创建一个新的适合毫米尺寸的页面。
4. 保存图片。

- Ziumper

---

很棒的解决方案。您是如何得出0.264583的转换数字的？我目前的理解是，您需要PDF的dpi值来确定转换数字。 - Rafiek

Answer 4

看起来图像大小和pdf页面大小不一样。你可以设置页面大小，例如添加一个与图像相似的定义高度和宽度的页面，或者在将图像添加到pdf时设置选项。

方法1的示例： 已在上面回答
方法2的示例：

    var pdf = new jsPDF("l", "mm", "a4");   //orientation: landscape
    var imgData = canvas.toDataURL('image/png');
    var width = pdf.internal.pageSize.getWidth();
    var height = pdf.internal.pageSize.getHeight();
    pdf.addImage(imgData, 'PNG', 0, 0, width, height); 
    pdf.save('download.pdf');

- Prakhathi M

Answer 5

我的解决方案是实现全宽自动高度，根据需要扩展页面高度。

  const document = new jsPDF();
  const imgProps= document.getImageProperties(imageToAdd);
  const width = document.internal.pageSize.getWidth();
  const ratio = width/ imgProps.width;
  const height = ratio * imgProps.height;
  document.internal.pageSize.height = height;
  document.addImage(this.doc, 'PNG', 0, 0, width, height);

- Tom H

Answer 6

这是对我有效的代码：

const doc = new jsPDF();

let width = doc.internal.pageSize.getWidth();
let height = doc.internal.pageSize.getHeight();

doc.addImage(imgData, 'JPEG', 0, 0, width, height);

- Muhammed Jabir

Answer 7

我指定了类似这样的东西。看起来不错。请尝试：

html2canvas(input)  
          .then((canvas) => {  
            var imgWidth = 350;  
            var imgHeight = canvas.height * imgWidth / canvas.width;  
            const imgData = canvas.toDataURL('image/png', 1.0);  
            const pdf = new jsPDF('l', 'mm', 'a4')  
            
            pdf.addImage(imgData, 'JPEG', -25 , 5,imgWidth , imgHeight);  

            pdf.save("download.pdf");  
          });  

- Minh Kha