Render HTML to an image

by

There is a lot of options and they all have their pro and cons.

Option 1: Use an API

Pros

  • Execute Javascript
  • Near perfect rendering
  • Fast when caching options are correctly used
  • Scale is handled by the APIs
  • Precise timing, viewport, …
  • Most of the time they offer a free plan

Cons

  • Not free if you plan to use them a lot

Option 2: Use one of the many available libraries

Pros

  • Conversion is quite fast most of the time

Cons

  • Bad rendering
  • Does not execute javascript
  • No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, …)
  • Sometimes not so easy to install
  • Complicated to scale

Option 3: Use PhantomJs and maybe a wrapper library

Pros

  • Execute Javascript
  • Quite fast

Cons

  • Bad rendering
  • No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, …)
  • Complicated to scale
  • Not so easy to make it work if there is images to be loaded …

Option 4: Use Chrome Headless and maybe a wrapper library

Pros

  • Execute Javascript
  • Near perfect rendering

Cons

  • Not so easy to have exactly the wanted result regarding:
    • page load timing
    • viewport dimensions
  • Complicated to scale
  • Quite slow and even slower if the html contains external links

Disclosure: I’m the founder of ApiFlash. I did my best to provide an honest and useful answer.

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. how to proportionally scale a div with images inside?
  3. How to silently hide “Image not found” icon when src source image is not found
  4. Disable dragging an image from an HTML page
  5. Make image fill div completely without stretching
  6. Center an Image vertically and horizontally using CSS
  7. Preserve browser window aspect ratio while shrinking [closed]
  8. Change from (+) symbol to (-) after click (function(){
  9. How can i create html automatic change page? [duplicate]
  10. How to get an HTML element’s style values in javascript?
  11. Get div height with plain JavaScript
  12. cross-domain iframe resize
  13. Show hide divs on click in HTML and CSS without jQuery
  14. How do I get a computed style?
  15. How to use CSS (and JavaScript?) to create a blurred, “frosted” background?
  16. Google Maps: How to create a custom InfoWindow?
  17. Performance differences between visibility:hidden and display:none
  18. Dashed border animation in css3 animation
  19. Cannot access cssRules from local css file in Chrome 64
  20. CSS3-Animate elements if visible in viewport (Page Scroll)
  21. “Scroll” to the very right of a long text input
  22. How to create a responsive image that also scales up in Bootstrap 3
  23. How to scroll table’s “tbody” independent of “thead”?
  24. How do I make a move up and down when I’m scrolling the page?
  25. Hide div element when screen size is smaller than a specific size
  26. Convert dropdown to selection boxes with color and trigger drop down action
  27. How to keep elements non-refreshed
  28. How do you swap DIVs on mouseover (jQuery)?
  29. How to get a leaflet map canvas to have a 100% height?
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment