Eksportuj zawartość Canvas do formatu PDF

Question

Pracuję nad czymś przy użyciu Canvas HTML5. To wszystko działa świetnie, z wyjątkiem teraz, mogę wyeksportować zawartość canvas do PNG przy użyciu Canvas2image. Ale chciałbym wyeksportować go do formatu PDF. Zrobiłem kilka badań i jestem prawie pewien, że jest to możliwe ... ale nie mogę zrozumieć, co muszę zmienić w moim kodzie, aby działało. Czytałem o wtyczce o nazwie pdf.js ... ale nie mogę wymyślić, jak wprowadzić ją do mojego kodu.

Pierwsza część:

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

I JS temu oszczędza obraz:

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

Spójrz na to linki:

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

Najprawdopodobniej będzie to zrobić pracę trzeba

Answer 2

Musisz użyć 2 wtyczek dla tego: 1) jsPDF 2) canvas-toBlob.js

następnie dodać ten kawałek kodu do wygenerowania lekki 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'); 
    }; 
});