CODEWITHSUNDEEP
javascripthtmlpdfcanvasjspdf
Meg
Meg

Reputation: 451

HTML5 canvas, convert canvas to PDF with jspdf.js

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.

Upvotes: 12

Views: 49540

Answers (5)

Raj Prabhu
Raj Prabhu

Reputation: 1

Just change the format JPEG to PNG

pdf.addImage(imgData, 'PNG', 0, 0, 1350, 750);

Upvotes: 0

deblocker
deblocker

Reputation: 7677

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.

Upvotes: 2

Scott Close
Scott Close

Reputation: 196

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

Upvotes: 3

Razan Paul
Razan Paul

Reputation: 13838

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/

Upvotes: 14

Earth
Earth

Reputation: 3571

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.

Upvotes: 0

Related Questions