https://github.com/littletof/snapper
ANSI formatted text to image
https://github.com/littletof/snapper
deno hacktoberfest puppeteer typescript
Last synced: 4 months ago
JSON representation
ANSI formatted text to image
- Host: GitHub
- URL: https://github.com/littletof/snapper
- Owner: littletof
- Created: 2021-10-18T14:38:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-30T15:04:35.000Z (almost 4 years ago)
- Last Synced: 2025-09-08T00:26:37.295Z (10 months ago)
- Topics: deno, hacktoberfest, puppeteer, typescript
- Language: TypeScript
- Homepage:
- Size: 602 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Snapper 📷
[](https://deno.land/x/snapper)
[](https://github.com/littletof/snapper)
> Snapper allows you to generate images from ANSI formatted text.
> 🚧 Project is WIP, expect breaking changes
Generate this image:
With this:
```ts
import { snap } from "https://deno.land/x/snapper@v0.0.6/mod.ts";
const testText = `[1mbold [22m[2mdim [22m[3mitalic [23m[4munderline [24m[7minverse [27m[9mstrikethrough [29m
[1m[30mblack [39m[22m[1m[31mred [39m[22m[1m[32mgreen [39m[22m[1m[33myellow [39m[22m[1m[34mblue [39m[22m[1m[35mmagenta [39m[22m[1m[36mcyan [39m[22m[1m[37mwhite [39m[22m
[1m[90mgray [39m[22m[30m[91mredBright [30m[39m[30m[92mgreenBright [30m[39m[30m[93myellowBright [30m[39m[30m[94mblueBright [30m[39m[30m[95mmagentaBright [30m[39m[30m[96mcyanBright [30m[39m[30m[97mwhiteBright [30m[39m
[37m[1m[40mbgBlack [49m[22m[39m[30m[1m[41mbgRed [49m[22m[39m[30m[1m[42mbgGreen [49m[22m[39m[30m[1m[43mbgYellow [49m[22m[39m[30m[1m[44mbgBlue [49m[22m[39m[30m[1m[45mbgMagenta [49m[22m[39m[30m[1m[46mbgCyan [49m[22m[39m[30m[1m[47mbgWhite [49m[22m[39m
[37m[3m[100mbgBlackBright [49m[23m[39m[30m[3m[101mbgRedBright [49m[23m[39m[30m[3m[102mbgGreenBright [49m[23m[39m[30m[3m[103mbgYellowBright [49m[23m[39m[30m[3m[104mbgBlueBright [49m[23m[39m[30m[3m[105mbgMagentaBright [49m[23m[39m[30m[3m[106mbgCyanBright [49m[23m[39m[30m[3m[107mbgWhiteBright [49m[23m[39m`;
await snap([
{content: testText, imageSavePath: 'docs/images/all.png', viewport: {width: 1045}},
]);
```
# Usage
#### Set up puppeteer
> In the background the module uses [deno Puppeteer](https://deno.land/x/puppeteer@9.0.2), which is a fork of [Puppeteer](https://github.com/puppeteer/puppeteer).
Follow the [current setup steps](https://github.com/lucacasonato/deno-puppeteer#installation), the basic setups should be something like:
```bash
PUPPETEER_PRODUCT=chrome deno run -A --unstable https://deno.land/x/puppeteer@9.0.2/install.ts
#windows
$env:PUPPETEER_PRODUCT='chrome'; deno run -A --unstable https://deno.land/x/puppeteer@9.0.2/install.ts
```
## Generate images
After puppeteer was set up, simply run the following:
```ts
import { snap } from "https://deno.land/x/snapper@v0.0.6/mod.ts";
const snapperText = `\x1b[42m \x1b[1m\x1b[37mSnapper\x1b[39m\x1b[22m 📷 \x1b[49m`;
await snap([
/* 1 */{content: snapperText, imageSavePath: 'snapper.png'},
/* 2 */{content: snapperText, imageSavePath: 'snapper_theme.png', theme: {background: '#acacac', green: '#297', brightWhite: '#ddd'}},
/* 3 */{content: snapperText, imageSavePath: 'snapper_font.png', fontFamily: "fantasy", fontSize: 10},
/* 4 */{content: snapperText, imageSavePath: 'snapper_padding.png', padding: '0px 0px 0px 0px', viewport: {width: 135}},
/* 5 */{content: snapperText, imageSavePath: 'snapper_viewport.png', viewport: {width: 135, height: 35, deviceScaleFactor: 1}},
], { verbose: true, viewport: {width: 135}});
```
The generated images will be placed placed into `cwd`+`imageSavePath`:
| | |
|----|-----------------------------------------------|
| 1. |  |
| 2. |  |
| 3. |  |
| 4. |  |
| 5. |  |
When creating multiple images, provide your inputs to `snap` in bulk, otherwise, calling the function one-by-one will take a lot of time to finish.
## Options
See the [docs](https://doc.deno.land/https/deno.land/x/snapper@v0.0.6/mod.ts) and the example code above for the different options.
> `height` cuts the image, while a small `width` will result in the content wrapping
## 🚩 Flags
|Flag| Required |Reason|
|:--|:-:|:--|
| 🚧 `--unstable` | yes | Needed for [Puppeteer](https://deno.land/x/puppeteer) |
| 🧭 `--allow-env` | yes | Needed for [Puppeteer](https://deno.land/x/puppeteer) to access which browser to use |
| 🔍 `--allow-read` | yes | Needed for [Puppeteer](https://deno.land/x/puppeteer) to read the browser executable |
| 💾 `--allow-write` | yes | Needed for [Puppeteer](https://deno.land/x/puppeteer) to read the browser executable and to save the generated images |
| ⚠ `--allow-run` | yes | Needed for [Puppeteer](https://deno.land/x/puppeteer) to run the browser in the background |
| 🌐 `--allow-net` | yes | Needed to be able to run the background server which puppeteer visits and captures |
# Spread the word
If you use `snapper` in your module or to generate images for your documentation/Readme consider adding a badge to it:
[](https://github.com/littletof/snapper)
[](https://github.com/littletof/snapper)
[](https://github.com/littletof/snapper)
[](https://github.com/littletof/snapper)
[](https://github.com/littletof/snapper)
[](https://github.com/littletof/snapper)
# TODO
- [ ] Try polyfill DOM+canvas, use xterm without puppeteer
- [ ] Improve server, so it can be hosted as a standalone site