Convert Kinetic.js Canvas to PDF

Мне было интересно, сможет ли кто-нибудь помочь мне найти лучший способ конвертировать мой Kinetic.js canvas в файл PDF? Я подумал, что, исследуя, какой холст использовать, я увидел что-то, что могло бы это сделать, но я не могу сейчас его найти.Convert Kinetic.js Canvas to PDF

Много Оценил

*** EDIT После попытки jsPDF и пытается следовать их примеру, я по-прежнему возникают проблемы. Вот мой код: Я пробовал jsPDF и не могу заставить его работать по какой-то причине, хотя я следую учебным пособиям. Вот мой код, если вы не против смотреть на него. (Html и большинство javascript только из учебника Kineticjs, я просто добавил метод в конце, чтобы превратить его в PDF-файл, который не работает.)

по какой-то причине он возвращает «img» как неопределенный и говорит «ТипError: 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 не является функцией».

источник

2014-01-11 billatron

Картина холста в KineticJS может быть экспортирована в .png (или .jpg) с использованием stage.toDataURL().

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

Convert Kinetic.js Canvas to PDF

ответ

Смежные вопросы