将 Kinetic.js Canvas 转换为 PDF

我想知道是否有人可以帮助我找出将 Kinetic.js 画布转换为 PDF 文件的最佳方法？我想在研究使用哪种画布时，我看到了可以做到这一点的东西，但现在似乎找不到了。

非常感谢

***编辑在尝试 jsPDF 并尝试遵循他们的示例后，我仍然遇到问题。这是我的代码：我已经尝试过 jsPDF，即使我遵循教程，但由于某种原因也无法让它工作。如果你不介意看一下，这是我的代码。（html和大部分javascript只是来自Kineticjs教程，我只是在最后添加了一个方法，将其转换为不起作用的PDF。

出于某种原因，它将"img"返回为未定义并说"TypeError： doc.addImage 不是函数"。

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="JSPDFjspdf.js"></script>
    <script type="text/javascript" src="JSPDFjspdf.plugin.standard_fonts_metrics.js"></script> 
    <script type="text/javascript" src="JSPDFjspdf.plugin.split_text_to_size.js"></script>               
    <script type="text/javascript" src="JSPDFjspdf.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"返回为未定义并说"TypeError： doc.addImage 不是函数"。

KineticJS中的画布绘图可以使用stage.toDataURL（）导出到.png（或.jpg）图像。

var stagePNG = stage.toDataURL();

您可以使用 jsPDF 等应用程序将该图像（以及所需的任何其他信息）嵌入到 PDF 中：

https://github.com/MrRio/jsPDF

如果其他人遇到这个线程，我通过执行以下操作让它工作，希望它对某人有所帮助。使用以下方法（不要忘记将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);

相关内容

最新更新

热门标签：