0
736
ViewsImage is not fitting in PDF document. Using jspdf
This is the code I am using. My image is quite large. is there a solution to increase page size according to image size in 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");
}); ```
1 answers
Answer question0
An image will fit wherever you place it but be constrained by the page size so here I set the page to 25"x25" (63.5 cm x 63.5cm) and once that page is set the image can stretch (or shrink exactly to that size)
It is the placement ratio that decides how much stretch or shrink is seen in either direction. The choice of both sets of units and ratio (page and page object) need to be predetermined for a PDF image rendering.
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');
Note the image was 1" x 1" and now looks streched to 25" HOWEVER inside the PDF it is still only 500x500 unitless pixels so when extracted at say 96dpi it will be declared as 5.208333.." x 5.208333.." so extract at 500dpi to return it to a postage stamp.
The whole point is you set beforehand how the pixels will be utilised in terms of PDF scale and image width to height ratio (forget the normal non PDF concept of dots per inch).