HTML5 Leinwand, konvertieren Leinwand in PDF mit jspdf.js

Question

Ich versuche, HTML5 Leinwand zu PDF in JavaScript zu konvertieren, aber ich bekomme einen schwarzen Hintergrund PDF. Ich habe versucht, die Hintergrundfarbe zu ändern, aber immer noch schwarz. Das folgende ist Code, den ich versuche:

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

Wenn Sie irgendeine Idee haben, würde ich es sehr schätzen.

Answer 1

Zuerst müssen Sie die gewünschte Hintergrundfarbe auf der canvas vor dem Erhalt der data setzen. Dann müssen Sie jpeg Bild auf die canvas zeichnen.

Answer 2

Ein guter Ansatz ist die Kombination von jspdf.js und html2canvas. Ich habe ein Vergnügen für dich gemacht.

<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/

Answer 3

Ich hatte das gleiche Problem, z.B. Das erste Mal, wenn ich ein PDF erstellen, ist das Leinwandbild in Ordnung, aber alle anderen als nächstes, kam schwarz heraus. Kein Bild!

Die Problemumgehung, die ich gefunden habe, ist wie folgt: nach jedem Aufruf von pdf.addImage() ich zeichne das Bild in der Zeichenfläche. Es funktioniert jetzt gut für mich.

EDIT: Wie gewünscht, hier einige weitere Details:

Let sagen, dass ich eine Leinwand Zeichnung Funktion wie diese haben (nur ein Beispiel, es spielt keine Rolle):

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 hatte meine Druckfunktion zu beheben, wie folgt:

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 

ich gebe zu, ich weiter untersuchen did'nt, einfach nur glücklich, dass dies funktioniert.

Answer 4

Eine sehr einfache Lösung ist, dass Sie das Bild als JPEG speichern. Speichern statt als png funktioniert gut für meine Anwendung. Beachten Sie, dass die Antwort Blizzard auch den Ausdruck als PNG enthält und auch eine nicht schwarze Füllung für transparente Ebenen in der Arbeitsfläche erzeugt.

var canvas = event.context.canvas; 
    var data = canvas.toDataURL('image/png'); 

statt

var canvas = event.context.canvas; 
    var data = canvas.toDataURL('image/jpg');