Canvas PDF截图中的图像：如何使画布完全适合PDF页面？

当使用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

---

有人知道如何使画布适合吗？

也可以尝试设置图像的宽度和高度（在任何情况下，似乎没有关于addImage的文档）：

---

我为您提供了一个解决方案：

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');
            }
        });
}

你必须做的事情是：

将像素转换为毫米

删除第一个未正确调整大小的页面

创建一个新的具有良好大小（mm）的

保存图像

---

看起来图像的大小和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');

---

以下是对我有用的解决方案，适用于我的用例：

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");

---

我指定了这样的东西。看起来像gd。请尝试：

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");  
          });  

---

控制台中有错误吗？@KenFyrstenberg没有错误。从HTML制作画布到将其放入PDF，一切都进行得很顺利，只是它不完全适合，最终将画布/图像的其余部分切掉，就像它不在乎一样。你刚刚救了我的周末！我试过了，我用的是纵向视图，set

varpdf=newjspdf（“p”、“mm”、“a4”）和
pdf.addImage（imgData，'JPEG'，10,10,150,180）这不起作用：（有什么建议吗？很好的解决方案。你是如何得到转换数0.264583的？我目前的理解是，你需要pdf的dpi值来确定转换数。
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");  
          });