httpng - A local server for snapshotting HTML elements
Httpng is a local server that you can run if you want to use HTML5 & CSS3 to design but you want to export the page elements as PNGs. The server uses the html2canvas library to render the elements on the screen. Please see the limitations section of this README for more information about what can and cannot be rendered.
Httpng follows the rules of Semantic Versioning.
You can install httpng with RubyGems:
$ gem install httpng
To run httpng, simply change directories to where your HTML file resides and run the following command:
This will run a web server at
localhost:7020. You can change the port
by setting the
-p option on the command line. When opening the
web page in your browser, be sure to add the file name after the host and port.
For example, if your file name is
my_page.html then open up
http://localhost:7020/my_page.html and not just
so just make sure your file includes
<HEAD> and the file extension
When you load your page then you should see a bar at the top that gives you a button to export your images.
To mark HTML elements for export, simply add a
data-export="<name>" tag to the
element like this:
<div style="border:1px solid black;" data-export="my_file"> <!-- More code here... --> </div>
When you export your images, this
DIV will be exported as
your output directory.
httpng will export your files to the
relative to when you started the command from. To change the output directory,
simply use the
-o arguments on the command line:
$ httpng -o /path/to/my_output_dir
There are a few limitations with HTTPNG:
Text directly in the exported element will not render. For example, placing text in a DIV (
<div>foo</div>) will not render but putting the text in a span or p will work:
Any limitation of the html2canvas library: http://html2canvas.hertzen.com/.