web-dev-qa-db-fra.com

Toile HTML5, convertir une toile en PDF avec jspdf.js

J'essaie de convertir une toile HTML5 en PDF en JavaScript, mais je reçois un PDF en arrière-plan noir. J'ai essayé de changer la couleur d'arrière-plan mais je continue à noircir. Ce qui suit est le code que j'essaye:

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

Si vous avez une idée, je l'apprécierais beaucoup.

javascripthtml5pdfcanvasjspdf
8
user3289230

Une bonne approche consiste à utiliser la combinaison de jspdf.js et html2canvas. Je t'ai préparé un violon.

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

7
Razan Paul

Une solution très simple consiste à enregistrer l’image au format jpeg. Enregistrer à la place au format png fonctionne très bien pour mon application. Il est à noter que la réponse de Blizzard inclut également l’impression au format png et produit également un remplissage non noir pour les calques transparents de la toile.

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

au lieu de 

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

J'ai eu le même problème, par exemple la première fois que je crée un pdf, l'image de la toile est ok, mais toutes les autres suivantes sont sorties en noir. Pas d'image!

La solution de contournement que j'ai trouvée est la suivante: après chaque appel à pdf.addImage (), je redessine l'image dans la zone de dessin. Cela fonctionne maintenant bien pour moi.

EDIT: Comme demandé, voici quelques détails supplémentaires:

Disons que j'ai une fonction de dessin sur toile comme celle-ci (juste un exemple, peu importe):

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;
    }
  }
}

J'ai dû corriger ma fonction d'impression comme suit:

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

Je reconnais que je n’ai pas enquêté davantage, je suis heureux que cela fonctionne.

0
deblocker

Tout d’abord, vous devez définir la couleur d’arrière-plan souhaitée sur la canvas avant d’obtenir la data. Ensuite, vous devez dessiner une image jpeg sur la canvas.

0
John Stephen

Il suffit de changer JPEG pour PNG pdf.addImage (imgData, 'PNG', 0, 0, 1350, 750);

0
Raj Prabhu