Home → Suggestions →

Export to PNG

• Edit

Pierre-François Bonnefoi

03 Sep, 2012 01:14 PM

Hello,

Could you please propose an option to export the preview window as a picture with a user selected sized aera ?

Thank you,
best regards,
pfb

1. Support Staff 1 Posted by Brett on 05 Sep, 2012 06:13 PM

   

   For what purpose would you use this? Export to PDF seems like it would cover full doc output, and you can use any screenshot tool to just capture the current window. Just curious how you see it being useful.

   • Edit

2. 2 Posted by Pierre-François... on 05 Sep, 2012 07:01 PM

   

   The purpose is not a very frequent one : I use marked to generate an HTML page restricted to 576px wide PNG in order to print it on a thermal receipt printer.
   I could see another use : using Geektool to publish the content on the desktop.

   Until now, I use webkit2png that I've modified for my need. But I would be grateful that you include this.
   Other suggestions could be to integrate some Javascript capabilities.

   • Edit

3. Support Staff 3 Posted by Brett on 05 Sep, 2012 07:22 PM

   

   I think webkit2png is going to be a better solution for things like geektool, mostly because then you don't have to have Marked running to use it.

   Marked is almost nothing *but* javascript capabilities. What are you looking for there?

   • Edit

4. 4 Posted by Pierre-François... on 05 Sep, 2012 07:29 PM

   

   I use JQuery to change the aspect of the list for a "ToDo List" zone :
   I've written a ##ToDo header followed by the ToDo List with some elements followed by '@done'.
   Then, with JQuery I change the list style to get checkbox pictures instead of bullet, and for the elements followed by '@done', I get a checked checkbox.

   • Edit

5. 5 Posted by Pierre-François... on 05 Sep, 2012 08:05 PM

   

   I've tried to generate a PDF, then a PNG : the output size is different from the size specified in the CSS.
   As the thermal receipt printer is only black & white I use the "-webkit-font-smoothing: none;" option in order to prevent use of grey shading.

   • Edit

6. Support Staff 6 Posted by Brett on 05 Sep, 2012 08:11 PM

   

   The "@media print" settings may be throwing off your PDF generation, you might want to create a custom stylesheet from the example one that overrides those with settings more appropriate for your printer.

   • Edit

7. 7 Posted by Pierre-François... on 05 Sep, 2012 08:28 PM

   

   I've modified the '@media print' part of the css, but I get always a blank area at the right of the document.
   I get also some terrible results with some anti aliasing occuring during the PDF to PNG convert that ruin the purpose of having only black and white output.

   If it not could be possible to implement this, never mind, I will stick on my workflow : save as HTML, render it with webkit2png and then print on my Citizen ct-s310ii.

   In future, I will try to integrate html2canvas to the document, in order to get some internal snapshot.

   Thanks for your support,
   pfb

   • Edit

8. Support Staff 8 Posted by Brett on 05 Sep, 2012 08:33 PM

   

   The problem is that any PNG I render from the webkit view is going to suffer the same issues as it all runs through the central print system. Can you send me a screenshot of the blank area at the right you're talking about so I can better envision that issue?

   • Edit

9. 9 Posted by Pierre-François... on 05 Sep, 2012 09:15 PM

   

   Grrr... I've made a snapshot of your rendering with html2canvas in Marked by integrating in the markdown document the following lines :
   HTML header:
   HTML header:
   HTML header:

   But I'm cursed : the rendering inside WebKit doesn't take into account that I've unset the anti-aliasing... So I'm blocked.

   I've joined a capture obtained from the PDF.

   • test.png 6.7 KB
   • Edit

10. 10 Posted by Pierre-François... on 05 Sep, 2012 09:17 PM

    

    Oups the HTML header get filtered :
    HTML header: (script type="text/javascript" src="html2canvas.js")(/script)
    HTML header: (script type="text/javascript" src="jquery.plugin.html2canvas.js")(/script)
    HTML header: (script type="text/javascript") html2canvas( [ wrapper ],{ onrendered: function (c) { var data = c.toDataURL(); console.log(data); }}) (/script)

    • Edit