Esporta contenuto Canvas in PDF

Question

Sto lavorando su qualcosa utilizzando HTML5 Canvas. Funziona tutto alla grande, tranne che ora, posso esportare il contenuto della tela in PNG usando Canvas2image. Ma vorrei esportarlo in PDF. Ho fatto delle ricerche e sono abbastanza sicuro che sia possibile ... ma non riesco a capire cosa ho bisogno di cambiare nel mio codice per farlo funzionare. Ho letto di un plugin chiamato pdf.js ... ma non riesco a capire come inserirlo nel mio codice.

Prima parte:

function showDownloadText() { 
     document.getElementById("buttoncontainer").style.display = "none"; 
     document.getElementById("textdownload").style.display = "block"; 
    } 

    function hideDownloadText() { 
     document.getElementById("buttoncontainer").style.display = "block"; 
     document.getElementById("textdownload").style.display = "none"; 
    } 

    function convertCanvas(strType) { 
     if (strType == "PNG") 
      var oImg = Canvas2Image.saveAsPNG(oCanvas, true); 
     if (strType == "BMP") 
      var oImg = Canvas2Image.saveAsBMP(oCanvas, true); 
     if (strType == "JPEG") 
      var oImg = Canvas2Image.saveAsJPEG(oCanvas, true); 

     if (!oImg) { 
      alert("Sorry, this browser is not capable of saving " + strType + " files!"); 
      return false; 
     } 

     oImg.id = "canvasimage"; 

     oImg.style.border = oCanvas.style.border; 
     oCanvas.parentNode.replaceChild(oImg, oCanvas); 

     showDownloadText(); 
    } 

E la JS a che salva l'immagine:

document.getElementById("convertpngbtn").onclick = function() { 
     convertCanvas("PNG"); 
    } 

    document.getElementById("resetbtn").onclick = function() { 
     var oImg = document.getElementById("canvasimage"); 
     oImg.parentNode.replaceChild(oCanvas, oImg); 

     hideDownloadText(); 
    } 

} 

Answer 1

Guardate questo link:

• http://www.codeproject.com/Questions/385045/export-html5-webpage-including-canvas-to-pdf
• http://badassjs.com/post/708922912/pdf-js-create-pdfs-in-javascript

Molto probabilmente farà il lavoro è necessario

Answer 2

È necessario utilizzare 2 plugin per questo: 1) jsPDF 2) canvas-toBlob.js

Quindi aggiungere questo pezzo di codice per generare il peso leggero PDF:

canvas.toBlob(function (blob) { 
    var url = window.URL || window.webkitURL; 
    var imgSrc = url.createObjectURL(blob); 
    var img = new Image(); 
    img.src = imgSrc; 
    img.onload = function() { 
     var pdf = new jsPDF('p', 'px', [img.height, img.width]); 
     pdf.addImage(img, 0, 0, img.width, img.height); 
     pdf.save(fileName + '.pdf'); 
    }; 
});