將Kinetic.js畫布轉換為PDF
[英]Convert Kinetic.js Canvas to PDF
問題描述
我想知道是否有人可以幫助我找出將Kinetic.js畫布轉換為PDF文件的最佳方法？ 我以為在研究要使用哪個畫布時，我看到了可以做到的事情，但是現在似乎找不到。
非常感激
***編輯在嘗試jsPDF並嘗試遵循其示例之后，我仍然遇到問題。 這是我的代碼：我已經嘗試過jsPDF，盡管我遵循了教程，但由於某種原因卻無法使它正常工作。 如果您不介意的話，這是我的代碼。 （html和大多數javascript都來自Kineticjs教程，我只是在最后添加了一種方法，將其轉換為無法使用的PDF。）
由於某種原因，它返回未定義的“ 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>
由於某種原因，它返回未定義的“ img”，並顯示“ TypeError：doc.addImage不是函數”。
2 個解決方案
解決方案1
0 2014-01-11 20:25:23
可以使用stage.toDataURL（）將KineticJS中的畫布繪圖導出為.png（或.jpg）圖像。
var stagePNG = stage.toDataURL();
您可以使用jsPDF之類的應用將該圖像（以及所需的任何其他信息）嵌入PDF中：
解決方案2
0 2014-10-30 07:05:59
萬一其他人遇到此線程，我可以通過以下操作使其正常工作，希望它能對某人有所幫助。 使用以下命令（ 不要忘記將 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);
使用javascript和kinetic.js在畫布上平滑滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.