当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Convert Kinetic.js Canvas to PDF

问题描述:

I was wondering if anyone could help me figure out the best way to convert my Kinetic.js canvas to a PDF file? 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. Here is my code:

I've tried jsPDF and can't get it to work for some reason even though I follow the tutorials. 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.)

for some reason it returns "img" as undefined and says

"TypeError: doc.addImage is not a function".

<!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".

网友答案:

A canvas drawing in KineticJS can be exported to a .png (or .jpg) image using stage.toDataURL().

var stagePNG = stage.toDataURL();

You can embed that image (along with any other info desired) in a PDF using an app like jsPDF:

https://github.com/MrRio/jsPDF

网友答案:

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) :

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);
分享给朋友:
您可能感兴趣的文章:
随机阅读: