HTML5 canvas, convertir toile au format PDF avec jspdf.js

Je suis en train de convertir HTML5 canvas PDF en JavaScript mais j'obtiens un fond noir PDF. J'ai essayé de changer la couleur d'arrière-plan, mais encore obtenir du noir. Voici le code que j'essaie:

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.

OriginalL'auteur user3289230 | 2014-11-04

  1. 7

    Une bonne approche est d'utiliser la combinaison de jspdf.js et html2canvas. J'ai fait un jsfiddle pour vous.

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

    Pourquoi est-il une bonne méthode à utiliser une combinaison de html2canvas avec jspdf. il a déjà une toile. Même c'est mon cas. Je suis en utilisant le même code que vous avez dans onrendered, mais puisque j'ai déjà une toile, je ne suis pas à l'aide de html2canvas.
    C'est une bonne question. C'était juste une expérience. Il ya quelques mois, quand je travaillais sur ce, j'ai trouvé que jspdf.js lui-même ne donne pas de résultat uniforme pour les graphes de Flot. À l'aide de html2canvas résolu mon problème. Pour être honnête, je n'ai pas étudier le code interne de ces bibliothèques. Oh je me souviens, Flot des graphiques a été l'ajout d'autres éléments HTML avec la Toile. Si c'est uniquement de toile, puis Jspdf est probablement suffisant.

    OriginalL'auteur Razan Paul

  2. 3

    Une solution très simple est que vous êtes l'enregistrement de l'image jpeg. L'épargne au lieu png fonctionne très bien pour mon application. De note, Blizzard's réponse comprend également l'impression que png, et produit également de la non-remplissage noir pour les couches transparentes dans le canevas.

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

    OriginalL'auteur Scott Close

  3. 0

    Au premier abord, vous devez ensemble l'arrière-plan de couleur sur le canvas avant d'obtenir le data. Ensuite, vous devez dessiner jpeg image sur le canvas.

    Merci pour la réponse. - Je définir fond d'écran de couleur de la Toile.style.color = "white", mais toujours noir.

    OriginalL'auteur John Stephen

  4. 0

    J'ai eu le même problème, par exemple, la première fois quand j'ai créer un fichier pdf à la toile, l'image est ok, mais tous les autres à côté, est venu de noir. Pas de photo!

    La solution de contournement que j'ai trouvé est la suivante: après chaque appel au format pdf.addImage() je le rafraîchissement de l'image dans le canevas. Il fonctionne maintenant très bien pour moi.

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

    Disons que j'ai une toile fonction de dessin comme ça (juste un exemple, il n'a pas d'importance):

    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û réparer 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 l'avoue, je n'ai pas poursuivre l'enquête, content que cela fonctionne.

    Pouvez-vous préciser after each call to pdf.addImage() i redraw the picture in the canvas? Il serait très utile si vous pouviez partager du code.
    ajouté mon exemple de code

    OriginalL'auteur deblocker

  5. 0

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

    Bienvenue sur Stackoverflow. Auriez-vous l'esprit d'une prolongation de votre réponse peu plus pour les autres programmeurs, afin de comprendre exactement comment il aide à résoudre le problème.

    OriginalL'auteur Raj Prabhu