将Kinetic.js画布转换为PDF

Question

I was wondering if anyone could help me figure out the best way to convert my Kinetic.js canvas to a PDF file? 我想知道是否有人可以帮助我找出将Kinetic.js画布转换为PDF文件的最佳方法？ I thought when researching which canvas to use I saw something that could do this, but I can't seem to find it now. 我以为在研究要使用哪个画布时，我看到了可以做到的事情，但是现在似乎找不到。

Much Appreciated 非常感激

***EDIT After trying jsPDF and trying to follow their examples I'm still having problems. ***编辑在尝试jsPDF并尝试遵循其示例之后，我仍然遇到问题。 Here is my code: I've tried jsPDF and can't get it to work for some reason even though I follow the tutorials. 这是我的代码：我已经尝试过jsPDF，尽管我遵循了教程，但由于某种原因却无法使它正常工作。 Here is my code if you don't mind looking at it. 如果您不介意的话，这是我的代码。 (The html and most of the javascript is just from the Kineticjs tutorial, I just added a method at the end to turn it into a PDF which isn't working.) （html和大多数javascript都来自Kineticjs教程，我只是在最后添加了一种方法，将其转换为无法使用的PDF。）

for some reason it returns "img" as undefined and says "TypeError: doc.addImage is not a function". 由于某种原因，它返回未定义的“ img”，并显示“ 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>

for some reason it returns "img" as undefined and says "TypeError: doc.addImage is not a function". 由于某种原因，它返回未定义的“ img”，并显示“ TypeError：doc.addImage不是函数”。

Answer 1

A canvas drawing in KineticJS can be exported to a .png (or .jpg) image using stage.toDataURL(). 可以使用stage.toDataURL（）将KineticJS中的画布绘图导出为.png（或.jpg）图像。

var stagePNG = stage.toDataURL();

You can embed that image (along with any other info desired) in a PDF using an app like jsPDF: 您可以使用jsPDF之类的应用将该图像（以及所需的任何其他信息）嵌入PDF中：

https://github.com/MrRio/jsPDF https://github.com/MrRio/jsPDF

Answer 2

In case anyone else comes across this thread, I got it working by doing the following, hope it helps someone. 万一其他人遇到此线程，我可以通过以下操作使其正常工作，希望它能对某人有所帮助。 Use the following ( Don't forget to apply id="savePdf" to a button ) : 使用以下命令（ 不要忘记将 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);

将Kinetic.js画布转换为PDF

问题描述

2 个解决方案

解决方案1
0 2014-01-11 20:25:23

解决方案2
0 2014-10-30 07:05:59

将Kinetic.js画布转换为PDF

问题描述

2 个解决方案

解决方案1 0 2014-01-11 20:25:23

解决方案2 0 2014-10-30 07:05:59

解决方案1
0 2014-01-11 20:25:23

解决方案2
0 2014-10-30 07:05:59