65 lines
1.5 KiB
Markdown
65 lines
1.5 KiB
Markdown
# HTML to PNG Converter
|
|
|
|
A Claude Code skill for converting HTML files to PNG images using Playwright's CLI screenshot functionality.
|
|
|
|
## Purpose
|
|
|
|
Automates the conversion of HTML diagrams, charts, and documents to PNG images for use in:
|
|
- Academic papers and research publications
|
|
- Technical documentation
|
|
- Presentations and slide decks
|
|
- README files and project docs
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js >= 16
|
|
- Playwright (`npm install -g playwright` or use via `npx`)
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
# Install Playwright (if not already installed)
|
|
npm install -g playwright
|
|
playwright install chromium
|
|
|
|
# Convert HTML to PNG
|
|
playwright screenshot --full-page "file://$(pwd)/diagram.html" diagram.png
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Single File
|
|
|
|
```bash
|
|
playwright screenshot --full-page "file:///absolute/path/to/file.html" output.png
|
|
```
|
|
|
|
### Batch Conversion
|
|
|
|
```bash
|
|
for f in docs/*.html; do
|
|
playwright screenshot --full-page "file://$(pwd)/$f" "${f%.html}.png"
|
|
done
|
|
```
|
|
|
|
## Key Options
|
|
|
|
| Option | Description |
|
|
|--------|-------------|
|
|
| `--full-page` | Capture entire document (not just viewport) |
|
|
| `--viewport-size=WxH` | Set viewport dimensions (e.g., `1920x1080`) |
|
|
| `--wait-for-timeout=ms` | Wait before screenshot (for dynamic content) |
|
|
|
|
## Troubleshooting
|
|
|
|
See `reference/troubleshooting.md` for common issues and solutions.
|
|
|
|
## Related Skills
|
|
|
|
- **png-diagram-creator**: Creates HTML diagrams with academic styling
|
|
- **ascii-diagram-creator**: Terminal-compatible text diagrams
|
|
|
|
## License
|
|
|
|
MIT
|