Image in PDF cut off: How to make a canvas fit entirely in a PDF page?

Question

When placing the canvas in the PDF using the jspdf library makes the image cut off.

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

Does anyone have any ideas how to make the canvas fit?

@KenFyrstenberg no errors. everything goes fine from making a canvas out of the HTML and putting it in the PDF, it's just that it doesn't fit entirely and ends up cutting the rest of the canvas/image off like it doesn't care. — Gustavo Matias, Apr 11 '15 at 14:16

score 17 · Accepted Answer · answered Apr 11 '15 at 14:19

17

Try setting the width and height of the image as well (in any case, there is little documentation for addImage it seems):

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

answered Apr 11 '15 at 14:19

You just saved my weekend! – Gustavo Matias Apr 11 '15 at 14:35
I've tried in mine, I'm using portrait view, set `var pdf = new jsPDF("p", "mm", "a4");` and `pdf.addImage(imgData, 'JPEG', 10, 10, 150, 180);` and this doesn't work :( any suggestion? – Blackjack Aug 23 '19 at 06:11

score 8 · Answer 2 · answered Oct 22 '19 at 15:22

Here's the solution that worked for me, for my use case:

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

Ziumper · Answer 3 · 2017-02-17T16:18:43.420

I have a solution for you :

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

The things you have to do is:

Convert pixels to mm.
Delete first not resized properly page
Create a new one with good size in mm.
Save image.

Great solution. How did you get to the converion number 0.264583 ? My understanding at the moment is that you need the dpi value of the pdf to determine the conversion number. — Rafiek, Dec 14 '17 at 10:24

score 3 · Answer 4 · answered Apr 24 '19 at 10:24

It looks like the size of the image and page size of the pdf is not the same. you can either set the page size ie. add a page with defined height and width similar to the image or you can set options for the image while adding it into the pdf.

Example for method 1 : Answered above
Example for method 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');

score 0 · Answer 5 · answered Sep 02 '20 at 08:56

I specified something like this. Looks gd. Pls try:

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

score 0 · Answer 6 · answered Jun 25 '21 at 05:13

My solution for full width auto height that extends page height where needed

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

Muhammed Jabir · Answer 7 · 2023-07-19T06:03:51.827

0

Here's the code that worked for me:

const doc = new jsPDF();

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

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

edited Jul 19 '23 at 06:03

answered Jul 18 '23 at 09:58

Muhammed Jabir

66
5

Image in PDF cut off: How to make a canvas fit entirely in a PDF page?

7 Answers7

Linked

Related