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:
$ httpng
This will run a web server at http://localhost:7020. You can change the port
by setting the --port or -p option on the command line.
The server automatically inserts the JavaScript tags required for httpng to work
so just make sure your file includes <HTML> or <HEAD> and the file extension
is html.
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 my_file.png in
your output directory.
By default, httpng will export your files to the httpng-output/ directory
relative to when you started the command from. To change the output directory,
simply use the --output or -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: <div><span>foo</span></div>
Any limitation of the html2canvas library: http://html2canvas.hertzen.com/.
FAQs
Unknown package
We found that httpng demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.