Image in PDF cut off: How to make a canvas fit entirely in a PDF page?
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
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.