I am generating PDF file using jsPDF library. Everything is okay, but at page my chart has white background ( on PDF - black ):
Chart from my webpage:
And from PDF:
my code for generating file:
var newCanvas = document.querySelector('#canvasChart');
var newCanvasImg = newCanvas.toDataURL("image/jpeg", 1.0);
var doc = new jsPDF('landscape');
doc.setFontSize(20);
doc.text(15, 15, "Super Cool Chart");
doc.addImage(newCanvasImg, 'JPEG', 10, 10, 280, 150 );
doc.save('new-canvas.pdf');
Do you have an idea how to solve this ?
Thanks in advance,
Maybe later, but I solved using PNG image:
var newCanvasImg = newCanvas.toDataURL("image/png", 1.0);
Hope this helps.
Related
I am trying to print charts (JSChart) in a pdf using jsPDF. It seems like the chart image is created while the chart is not rendered completely (the data points are still on the bottom of the chart).
var ssvCanvas = document.querySelector('#line-chart-ssv');
var ssvCanvasImg = ssvCanvas.toDataURL("image/png", 1.0);
var doc = new jsPDF();
var ssvImgProps = doc.getImageProperties(ssvCanvasImg);
var width = doc.internal.pageSize.getWidth()-20;
var ssvHeight = (ssvImgProps.height * width) / ssvImgProps.width;
doc.addImage(ssvCanvasImg, 'JPEG', 10, 40, width, ssvHeight );
I have no idea what could help. A wait function wasnt useful as of now.
Can somebody please help?
trying to export my CartJS to PDF file using JavaScript.
I've found a solution for jsPDF ,and its working but the generated PDF view is too small.
This is my chart:
and this is generated file:
My code:
html2canvas($("#canvasChart"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL({
format: 'jpeg',
quality: 0.9 // compression works now!
});
var doc = new jsPDF("l", "mm", "a4");
doc.addImage(imgData, 'PNG', 100, 100);
doc.save('sample-file.pdf');
}
});
I will be very thankful for help and explanation what I am doing wrong.
Thanks in advance,
I m using jsPdf plugin and did this
var data = google.visualization.arrayToDataTable(dataValues,true);
var chart = new google.visualization.CandlestickChart(document.getElementById(id));
google.visualization.events.addListener(chart, 'ready', function () {
var content = '<img src="' + chart.getImageURI() + '">';
$('#graph-images').append(content);
});
function generatePDF() {
var imageTags = $('#graph-images img');
var doc = new jsPDF();
doc.setFontSize(33);
doc.setFillColor(135, 124,45,0);
doc.addImage(imageTags[0], 'png', 10, 10, 150, 100);
doc.save('sample.pdf');
}
by using this i am able to download the pdf file while open that pdf file in adobe reader its saying 110 error.
Can Anybody Help in this, thanks.
You should pass image URI to addImage():
google.charts.setOnLoadCallback(function() {
var data = google.visualization.arrayToDataTable(dataValues, true)
var chart = new google.visualization.CandlestickChart(document.getElementById(id))
chart.draw(data)
imgData = chart.getImageURI()
})
function generatePDF() {
var doc = new jsPDF();
doc.setFontSize(33);
doc.setFillColor(135, 124,45,0);
doc.addImage(imgData, 'png', 10, 10, 150, 100);
doc.save('sample.pdf');
}
Please check this live demo for more details https://jsfiddle.net/p1frmxvp/1/
UPDATE
Turns out the error happens only when we use jspdf 1.3.2 and open the pdf using Adobe Reader as explained here. The only solution so far is either opening the pdf using other viewer (Chrome, Foxit Reader .etc) or downgrading jspdf to 1.2.61. I have updated the jsfiddle above to use the downgraded jspdf.
I am using jspdf for creating PDF inside browser. I am having multiple charts having svg as chart Data. For adding data to pdf I am converting svg to png using canvas and then Base64 Data using canvas.toDataURL method. After all this conversions size of the file created by jspdf is huge (about 50 MB).
Below is the code for div of chart data and canvas.
newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;
below is the dimensions for SVG chart load.
document.getElementById("big_Con_graph" + id).style.display = "block";
var big_chartReference = FusionCharts("big_myChartId"+id);
if(big_chartReference != null){
big_chartReference.dispose();
}
var big_width = "1088";
var big_height = "604";
now below is the code for conversion of above graph SVG data and adding to PDF.
var elem_graph = $($('.big_Con_graph,big_Con_graph0')[count]).clone(true);
svgString = $(elem_graph).find("span").html();
var img = document.createElement('img');
var DOMURL = self.URL || self.webkitURL || self;
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = pdfAfterImageLoad(img,pdf,imgLoadSequence,DOMURL,totalReports,reportName);
img.src = url;
this is the code for PDFAfterImageLoad function:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);
I am using png, so imagequality parameter can not be used.
Can anyone help me decrease the file size?
You need to compress the images in the PDF's that you are generating. Try using Deflate.js and adler32cs.js and use the compress parameter in both jsPDF and addImage functions that you are using. For eg :
var doc = new jsPDF('p', 'pt','a4',true);
make sure you set the last parameter as 'true' refer to : https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146
Go through it and you can clearly see that the last parameter is for enabling compression.
Also use :
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');
instead of
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);
you can choose between NONE, FAST, MEDIUM and SLOW, whichever suits you best.
If you add several images to one document, use
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');
not
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');
otherwise the first image will substitute all others.
Perfect. PDF size 90mb to 3mb with great quality.
pdf.addImage(png, 'PNG', 0, 0, 485, 270, undefined,'FAST');
In my case did not work with compress parameter. So, I resized the current image on my own with the following function:
function resizeBase64Img(base64, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var deferred = $.Deferred();
$("<img/>").attr("src", "data:image/gif;base64," + base64).load(function() {
context.scale(width/this.width, height/this.height);
context.drawImage(this, 0, 0);
deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));
});
return deferred.promise();
}
And call it as follows:
//select my image in base64
var imageStr64 = "/9j/4RiDRXhpZgAATU0AKgA...";
//resize image, add image and create the pdf
resizeBase64Img(imageStr64, 1000, 1000).then(function(newImg){
doc.addImage($(newImg).attr('src'), 15, 90, 180,180);
doc.save('mypdf.pdf');
});
You can play with 'width' and 'height' parameters in resizeBase64Img function in order to generate heavy pdf with better or worst image quality.
Have you tried canvg? It's not very likely that it will decrease the filesize, but at least you can try.
See a snippet in this reply.
I've tried the compress parameter and passing compression:'MEDIUM' toe the addImage method as suggested but nothing happened
What worked for me was converting the canvas to DataUrl base64 string and passing a compression value
pdf.addImage({ imageData: canvas.toDataURL('image/jpeg', 0.6),format: 'JPEG', x: 2, y: 100, width: newImageWidth, height: newImageHeight});
This way the image is compressed before it is added to the PDF
I am trying to convert HTML5 canvas to PDF in JavaScript but I get a black background PDF. I tried to change the background color but still get black. The following is code I am trying:
Canvas = document.getElementById("chart");
Context = Canvas.getContext("2d");
var imgData = Canvas.toDataURL('image/jpeg');
var pdf = new jsPDF('landscape');
pdf.addImage(imgData, 'JPEG', 0, 0, 1350, 750);
pdf.save('download.pdf');
If you have any idea, I'd appreciate it very much.
A good approach is to use combination of jspdf.js and html2canvas. I have made a jsfiddle for you.
<canvas id="canvas" width="480" height="320"></canvas>
<button id="download">Download Pdf</button>
'
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');
}
});
jsfiddle: http://jsfiddle.net/rpaul/p4s5k59s/5/
One very simple solution is that you are saving the image as jpeg. Saving instead as png works fine for my application. Of note, Blizzard's response also includes the print as png, and also produces non-black fill for transparent layers in the canvas.
var canvas = event.context.canvas;
var data = canvas.toDataURL('image/png');
instead of
var canvas = event.context.canvas;
var data = canvas.toDataURL('image/jpg');
I had the same problem, e.g. the first time when i create a pdf the canvas image is ok, but all the other next, came out black. No picture!
The workaround i found is as follows: after each call to pdf.addImage() i redraw the picture in the canvas. It works now fine for me.
EDIT: As requested, here some more details:
Let say i have a canvas drawing function like this (just an example, it doesn't matter):
function drawCanvas(cv) {
for(var i=0; i<cv.height; i++) {
for(var j=0, d=0; j<cv.width; j++) {
cv.data[d] = 0xff0000;
d += 4;
}
}
}
I had to fix my printing function as follows:
var cv=document.getElementById('canvas');
printPDF(cv) {
var imgData=cv.toDataURL("image/jpeg", 1.0);
var doc=new jsPDF("p","mm","a4");
doc.addImage(imgData,'JPEG',15,40,180,180);
drawCanvas(cv); // <--- this line is needed, draw again
}
drawCanvas(cv); // <--- draw my image to the canvas, ok
printPDF(cv); // first time is fine
printPDF(cv); // second time without repaint would be black
I admit, i did'nt investigate further, just happy that this works.
At first, you need to set the desired background color on the canvas before getting the data. Then, you need to draw jpeg image on the canvas.
Just change the format JPEG to PNG
pdf.addImage(imgData, 'PNG', 0, 0, 1350, 750);