Pulling images from different canvases and exporting to a single pdf
I have a situation where I create multiple graphs on a web page and display them in a canvas, and my requirement is that when the download button is clicked, I should be able to export all of the canvas images to pdf.
I have successfully done this for one element canvas using html2canvas and Jspdf , but cannot figure out how to do the same for everyone.
I followed this JSFiddle for generating pdf from Html2canvas and jspdf.
$(document).ready(function() {
var d_canvas = document.getElementById('canvas');
var context = d_canvas.getContext('2d');
context.moveTo(20, 20);
context.lineTo(100, 20);
context.fillStyle = "#999";
context.beginPath();
context.arc(100, 100, 75, 0, 2 * Math.PI);
context.fill();
context.fillStyle = "orange";
context.fillRect(20, 20, 50, 50);
context.font = "24px Helvetica";
context.fillStyle = "#000";
context.fillText("Canvas", 50, 130);
$('#ballon').draggable();
$('#download').click(function() {
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
});
});
Please help, thanks in advance.
source to share
It was very simple, I just changed the argument to this line
html2canvas($("#canvas"), {
Instead of transferring separate canvases and then trying to export them to one pdf file, I saved different canvases to Div and passed the Div id to the above line and both canvases were exported to one PDF file
source to share
No need to use html2canvas for this. It will get you another canvas element at a cost. You can use original canvas element and toDataURL()
directly with jsPdf.
Example (partially pseudo)
This will collect all the canvases on the page and put them in PDF. The pseudo-part is the missing variables for width, delta, factor, etc. But you have to get the gist of it.
Note. The size of the images must be in the same box that you are using for the document, so you need to convert the positions and pixel sizes to millimeter representation using a pre-calculated factor based on the document's DPI (not shown here, but it might help).
var x = someX,
y = someY,
dx = somDeltaForX,
dy = somDeltaForY,
i,
canvases = document.querySelectorAll("canvas"),
pdf = new jsPDF('p', 'mm'),
f = convertionFactorFromPixelstoMM;
for(i = 0; i < canvases.length; i++) {
var url = canvases[i].toDataURL("image/jpeg", 0.75);
doc.addImage(url, "JPEG", x * f, y * f, canvases[i].width * f, canvases[i].height * f);
x += dx; // tip: dx could also be based on previous canvas width in non-uniform sizes
if (x > widthOfPage) {
x = 0;
y += dy;
}
}
source to share