Snapper allows you to generate images from ANSI formatted text.
🚧 Project is WIP, expect breaking changes
Generate this image:
With this:
import { snap } from "https://deno.land/x/[email protected]/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}},
]);In the background the module uses deno Puppeteer, which is a fork of Puppeteer.
Follow the current setup steps, the basic setups should be something like:
PUPPETEER_PRODUCT=chrome deno run -A --unstable https://deno.land/x/[email protected]/install.ts
#windows
$env:PUPPETEER_PRODUCT='chrome'; deno run -A --unstable https://deno.land/x/[email protected]/install.tsAfter puppeteer was set up, simply run the following:
import { snap } from "https://deno.land/x/[email protected]/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.
See the docs and the example code above for the different options.
heightcuts the image, while a smallwidthwill result in the content wrapping
| Flag | Required | Reason |
|---|---|---|
🚧 --unstable |
yes | Needed for Puppeteer |
🧭 --allow-env |
yes | Needed for Puppeteer to access which browser to use |
🔍 --allow-read |
yes | Needed for Puppeteer to read the browser executable |
💾 --allow-write |
yes | Needed for Puppeteer to read the browser executable and to save the generated images |
⚠ --allow-run |
yes | Needed for 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 |
If you use snapper in your module or to generate images for your documentation/Readme consider adding a badge to it:
- Try polyfill DOM+canvas, use xterm without puppeteer
- Improve server, so it can be hosted as a standalone site
