將Kinetic.js畫布轉換爲PDF

我想知道是否有人可以幫助我找出將我的Kinetic.js畫布轉換爲PDF文件的最佳方法？我想在研究使用哪種畫布時，我看到了可以做到這一點的事情，但我現在似乎無法找到它。將Kinetic.js畫布轉換爲PDF

大加讚賞

***編輯試圖jsPDF，並試圖按照自己的例子，我仍然有問題之後。這裏是我的代碼：我試過jsPDF，因爲某些原因無法讓它工作，即使我按照教程。這是我的代碼，如果你不介意看。（HTML和大部分javascript只是來自Kineticjs教程，我只是在最後添加了一種方法，將其變成PDF，但它不起作用。）

由於某種原因，它返回「img」爲undefined並說「TypeError：doc.addImage不是函數」。

<!DOCTYPE HTML> 
<html> 
    <head> 
    <script type="text/javascript" src="JSPDF\jspdf.js"></script> 
    <script type="text/javascript" src="JSPDF\jspdf.plugin.standard_fonts_metrics.js"></script> 
    <script type="text/javascript" src="JSPDF\jspdf.plugin.split_text_to_size.js"></script>    
    <script type="text/javascript" src="JSPDF\jspdf.plugin.from_html.js"></script> 
    <script type="text/javascript" src="../jspdf.plugin.addImage.js"></script> 

    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js"></script> 
    <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script> 

    <script defer="defer"> 
     var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
     }); 

     var layer = new Kinetic.Layer(); 

     var circle = new Kinetic.Circle({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     radius: 70, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4 
     }); 

     // add the shape to the layer 
     layer.add(circle); 

     // add the layer to the stage 
     stage.add(layer); 


    function toPDF() 
     { 


     var img=stage.toDataURL("image/jpeg");   
     var doc = new jsPDF(); 
     console.log(img); 
     doc.setFontSize(22); 
     doc.text(20, 20, 'This is a exmaple of jsPDF'); 
     doc.addImage(img,'JPEG', 10, 10, 50, 50); 
     doc.save('test.pdf'); 
     doc.output('datauri'); 

     } 



    </script> 
    <button id="button" onClick="toPDF()">Click </button> 
    </body> 
</html>

由於某種原因，它返回「IMG」爲未定義，並說「類型錯誤：doc.addImage不是一個函數」。

來源

2014-01-11 billatron

使用stage.toDataURL（）可以將KineticJS中的畫布圖導出爲.png（或.jpg）圖像。

var stagePNG = stage.toDataURL();

您可以嵌入圖像中的PDF使用像jsPDF一個應用程序（用所需的其它信息一起）：

https://github.com/MrRio/jsPDF

來源

2014-01-11 20:25:23 markE

感謝您的答覆。我試過jsPDF，因爲某些原因無法讓它工作，即使我按照教程。這是我的代碼，如果你不介意看。 – billatron

jsPDF現在只支持jpeg。 var stagePNG = stage.toDataURL（'image/jpeg'，1.0）; – bleuscyther

萬一別人遇到這個線程，我得到了它通過做以下工作，希望它可以幫助某人。使用以下（不要忘記申請id="savePdf"一個按鈕）：

document.getElementById('savePdf').addEventListener('click', function() { 
    stage.toDataURL({ 
    mimeType: "image/jpeg", 
    quality: 1.0, 
    callback: function(dataUrl) { 
     var imgData = dataUrl 
     var pdf = new jsPDF(); 
     pdf.addImage(imgData, 'JPEG', 0, 0); 
     pdf.save("download.pdf"); 
     } 
    }); 
    }, false);

來源

2014-10-30 07:05:59 rustysamurai

將Kinetic.js畫布轉換爲PDF

回答

相關問題