pixelati 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +90 -0
- package/dist/cli.d.ts +2 -0
- package/dist/cli.js +94 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +3 -0
- package/dist/render.d.ts +28 -0
- package/dist/render.js +110 -0
- package/package.json +61 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 DMXL
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# pixelati
|
|
2
|
+
|
|
3
|
+
Turn any image into truecolor terminal art. pixelati renders pictures into the terminal using half-block characters, so each character cell shows two stacked pixels at full 24-bit colour, with transparent areas left blank.
|
|
4
|
+
|
|
5
|
+
It works as both a command line tool and a small library, and it reads any format [sharp](https://sharp.pixelplumbing.com/) can decode (PNG, JPEG, WebP, GIF, AVIF, TIFF, and more).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
As a CLI:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install -g pixelati
|
|
13
|
+
pixelati <image>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
As a library:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install pixelati
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { renderToLines } from "pixelati";
|
|
24
|
+
const lines = await renderToLines("logo.png", { width: 56 });
|
|
25
|
+
console.log(lines.join("\n"));
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
This is an ESM-only package and needs Node 18 or newer.
|
|
29
|
+
|
|
30
|
+
### Local development
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
pnpm install
|
|
34
|
+
pnpm build # compiles to dist/
|
|
35
|
+
pnpm pixelati <image> # run from source via tsx
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
pixelati <image> [options]
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
| Option | Description |
|
|
45
|
+
|---|---|
|
|
46
|
+
| `-w, --width <n>` | Output width in columns. Defaults to the terminal width, or 80 when piped. |
|
|
47
|
+
| `-t, --threshold <n>` | Alpha cutoff from 0 to 255. Pixels at or below it are treated as transparent. Default 128. |
|
|
48
|
+
| `-b, --background <hex>` | Composite the image onto this colour instead of leaving transparent gaps (for example `#1e1e2e`). |
|
|
49
|
+
| `-o, --output <file>` | Write the art to a file instead of printing it. |
|
|
50
|
+
| `-h, --help` | Show help. |
|
|
51
|
+
|
|
52
|
+
### Examples
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
pixelati logo.png # render at terminal width
|
|
56
|
+
pixelati photo.jpg -w 60 # render 60 columns wide
|
|
57
|
+
pixelati icon.png -b "#000000" # composite onto black, no transparency
|
|
58
|
+
pixelati banner.png -w 100 -o banner.ans # save the escapes to a file
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
The height is derived from the width to preserve the image's aspect ratio, so you only ever set the width.
|
|
62
|
+
|
|
63
|
+
## Library
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
import { renderToLines, renderToString } from "pixelati";
|
|
67
|
+
|
|
68
|
+
// Array of ANSI strings, one per text row.
|
|
69
|
+
const lines = await renderToLines("logo.png", { width: 56 });
|
|
70
|
+
console.log(lines.join("\n"));
|
|
71
|
+
|
|
72
|
+
// Or the whole thing as one string.
|
|
73
|
+
const art = await renderToString("logo.png", { width: 56, background: "#101018" });
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
`renderToLines` and `renderToString` accept a file path or a `Buffer`, plus the same options as the CLI (`width`, `threshold`, `background`). Returning lines as an array is handy for baking the art into a generated source file, so a program can ship the rendered banner without any image dependency at runtime.
|
|
77
|
+
|
|
78
|
+
## How it works
|
|
79
|
+
|
|
80
|
+
The short version: a terminal cell is about twice as tall as it is wide, and ANSI lets you set a foreground and a background colour per cell independently. The `▀` (upper half block) paints the top half of the cell with the foreground while the background shows through the bottom half, so one character carries two vertically stacked pixels. That doubles vertical resolution, and truecolor escapes give each pixel any of 16 million colours. Transparent pixels become blanks so the terminal background shows through.
|
|
81
|
+
|
|
82
|
+
For the full walkthrough (downscaling, the transparency cases, aspect ratio, and how to verify the output visually) see [docs/how-it-works.md](./docs/how-it-works.md).
|
|
83
|
+
|
|
84
|
+
## Requirements
|
|
85
|
+
|
|
86
|
+
Node.js 18 or newer, and a terminal with truecolor support (most modern terminals: iTerm2, the macOS Terminal in recent versions, Windows Terminal, kitty, Alacritty, WezTerm, and others).
|
|
87
|
+
|
|
88
|
+
## License
|
|
89
|
+
|
|
90
|
+
MIT
|
package/dist/cli.d.ts
ADDED
package/dist/cli.js
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import { writeFile } from "node:fs/promises";
|
|
3
|
+
import { renderToLines } from "./render.js";
|
|
4
|
+
const HELP = `pixelati — turn any image into truecolor terminal art
|
|
5
|
+
|
|
6
|
+
Usage:
|
|
7
|
+
pixelati <image> [options]
|
|
8
|
+
|
|
9
|
+
Options:
|
|
10
|
+
-w, --width <n> Output width in columns (default: terminal width or 80)
|
|
11
|
+
-t, --threshold <n> Alpha cutoff 0-255; at or below is transparent (default: 128)
|
|
12
|
+
-b, --background <hex> Composite onto this colour instead of leaving gaps (e.g. #1e1e2e)
|
|
13
|
+
-o, --output <file> Write the art to a file instead of stdout
|
|
14
|
+
-h, --help Show this help
|
|
15
|
+
|
|
16
|
+
Examples:
|
|
17
|
+
pixelati logo.png
|
|
18
|
+
pixelati photo.jpg -w 60
|
|
19
|
+
pixelati icon.png -b "#000000"
|
|
20
|
+
pixelati banner.png -w 100 -o banner.ans
|
|
21
|
+
`;
|
|
22
|
+
function parseArgs(argv) {
|
|
23
|
+
const args = {};
|
|
24
|
+
for (let i = 0; i < argv.length; i++) {
|
|
25
|
+
const a = argv[i];
|
|
26
|
+
const next = () => {
|
|
27
|
+
const v = argv[++i];
|
|
28
|
+
if (v === undefined)
|
|
29
|
+
throw new Error(`Missing value for ${a}`);
|
|
30
|
+
return v;
|
|
31
|
+
};
|
|
32
|
+
switch (a) {
|
|
33
|
+
case "-h":
|
|
34
|
+
case "--help":
|
|
35
|
+
args.help = true;
|
|
36
|
+
break;
|
|
37
|
+
case "-w":
|
|
38
|
+
case "--width":
|
|
39
|
+
args.width = Number(next());
|
|
40
|
+
break;
|
|
41
|
+
case "-t":
|
|
42
|
+
case "--threshold":
|
|
43
|
+
args.threshold = Number(next());
|
|
44
|
+
break;
|
|
45
|
+
case "-b":
|
|
46
|
+
case "--background":
|
|
47
|
+
args.background = next();
|
|
48
|
+
break;
|
|
49
|
+
case "-o":
|
|
50
|
+
case "--output":
|
|
51
|
+
args.output = next();
|
|
52
|
+
break;
|
|
53
|
+
default:
|
|
54
|
+
if (a.startsWith("-"))
|
|
55
|
+
throw new Error(`Unknown option: ${a}`);
|
|
56
|
+
if (args.input)
|
|
57
|
+
throw new Error(`Unexpected extra argument: ${a}`);
|
|
58
|
+
args.input = a;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
return args;
|
|
62
|
+
}
|
|
63
|
+
async function main() {
|
|
64
|
+
const args = parseArgs(process.argv.slice(2));
|
|
65
|
+
if (args.help || !args.input) {
|
|
66
|
+
process.stdout.write(HELP);
|
|
67
|
+
process.exit(args.input ? 0 : 1);
|
|
68
|
+
}
|
|
69
|
+
if (args.width !== undefined && (!Number.isFinite(args.width) || args.width < 1)) {
|
|
70
|
+
throw new Error("--width must be a positive number");
|
|
71
|
+
}
|
|
72
|
+
if (args.threshold !== undefined &&
|
|
73
|
+
(!Number.isFinite(args.threshold) || args.threshold < 0 || args.threshold > 255)) {
|
|
74
|
+
throw new Error("--threshold must be between 0 and 255");
|
|
75
|
+
}
|
|
76
|
+
const opts = {
|
|
77
|
+
width: args.width ?? process.stdout.columns ?? 80,
|
|
78
|
+
threshold: args.threshold,
|
|
79
|
+
background: args.background,
|
|
80
|
+
};
|
|
81
|
+
const lines = await renderToLines(args.input, opts);
|
|
82
|
+
if (args.output) {
|
|
83
|
+
await writeFile(args.output, lines.join("\n") + "\n");
|
|
84
|
+
process.stderr.write(`Wrote ${lines.length} rows to ${args.output}\n`);
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
process.stdout.write(lines.join("\n") + "\n");
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
main().catch((err) => {
|
|
91
|
+
const msg = err instanceof Error ? err.message : String(err);
|
|
92
|
+
process.stderr.write(`pixelati: ${msg}\n`);
|
|
93
|
+
process.exit(1);
|
|
94
|
+
});
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
package/dist/render.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface RenderOptions {
|
|
2
|
+
/** Target width in terminal columns (one column per source pixel). */
|
|
3
|
+
width?: number;
|
|
4
|
+
/** Alpha cutoff (0-255). Pixels at or below this are treated as transparent. */
|
|
5
|
+
threshold?: number;
|
|
6
|
+
/**
|
|
7
|
+
* Hex colour (e.g. "#1e1e2e") to composite the image onto. When set, the
|
|
8
|
+
* result is fully opaque (no transparent gaps); when omitted, transparent
|
|
9
|
+
* pixels render as blanks.
|
|
10
|
+
*/
|
|
11
|
+
background?: string;
|
|
12
|
+
}
|
|
13
|
+
interface RGBA {
|
|
14
|
+
r: number;
|
|
15
|
+
g: number;
|
|
16
|
+
b: number;
|
|
17
|
+
a: number;
|
|
18
|
+
}
|
|
19
|
+
/** Parse "#rgb" or "#rrggbb" (with or without the leading #) into an RGBA. */
|
|
20
|
+
export declare function parseHex(hex: string): RGBA;
|
|
21
|
+
/**
|
|
22
|
+
* Render an image (any format sharp can decode) to an array of ANSI lines, one
|
|
23
|
+
* string per text row. Two image rows are encoded per line via half blocks.
|
|
24
|
+
*/
|
|
25
|
+
export declare function renderToLines(input: string | Buffer, opts?: RenderOptions): Promise<string[]>;
|
|
26
|
+
/** Convenience wrapper returning the rendered art as a single string. */
|
|
27
|
+
export declare function renderToString(input: string | Buffer, opts?: RenderOptions): Promise<string>;
|
|
28
|
+
export {};
|
package/dist/render.js
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import sharp from "sharp";
|
|
2
|
+
const RESET = "\x1b[0m";
|
|
3
|
+
const UPPER_HALF = "▀";
|
|
4
|
+
const LOWER_HALF = "▄";
|
|
5
|
+
const fg = (p) => `\x1b[38;2;${p.r};${p.g};${p.b}m`;
|
|
6
|
+
const bg = (p) => `\x1b[48;2;${p.r};${p.g};${p.b}m`;
|
|
7
|
+
const DEFAULT_WIDTH = 80;
|
|
8
|
+
const DEFAULT_THRESHOLD = 128;
|
|
9
|
+
/** Parse "#rgb" or "#rrggbb" (with or without the leading #) into an RGBA. */
|
|
10
|
+
export function parseHex(hex) {
|
|
11
|
+
let h = hex.trim().replace(/^#/, "");
|
|
12
|
+
if (h.length === 3)
|
|
13
|
+
h = h.split("").map((c) => c + c).join("");
|
|
14
|
+
if (!/^[0-9a-fA-F]{6}$/.test(h)) {
|
|
15
|
+
throw new Error(`Invalid hex colour: "${hex}"`);
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
r: parseInt(h.slice(0, 2), 16),
|
|
19
|
+
g: parseInt(h.slice(2, 4), 16),
|
|
20
|
+
b: parseInt(h.slice(4, 6), 16),
|
|
21
|
+
a: 255,
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
/** Alpha-composite `top` over the opaque `base`. */
|
|
25
|
+
function composite(top, base) {
|
|
26
|
+
const a = top.a / 255;
|
|
27
|
+
return {
|
|
28
|
+
r: Math.round(top.r * a + base.r * (1 - a)),
|
|
29
|
+
g: Math.round(top.g * a + base.g * (1 - a)),
|
|
30
|
+
b: Math.round(top.b * a + base.b * (1 - a)),
|
|
31
|
+
a: 255,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Render an image (any format sharp can decode) to an array of ANSI lines, one
|
|
36
|
+
* string per text row. Two image rows are encoded per line via half blocks.
|
|
37
|
+
*/
|
|
38
|
+
export async function renderToLines(input, opts = {}) {
|
|
39
|
+
const width = Math.max(1, Math.floor(opts.width ?? DEFAULT_WIDTH));
|
|
40
|
+
const threshold = opts.threshold ?? DEFAULT_THRESHOLD;
|
|
41
|
+
const base = opts.background ? parseHex(opts.background) : null;
|
|
42
|
+
const pipeline = sharp(input);
|
|
43
|
+
const meta = await pipeline.metadata();
|
|
44
|
+
if (!meta.width || !meta.height) {
|
|
45
|
+
throw new Error("Could not read image dimensions.");
|
|
46
|
+
}
|
|
47
|
+
// Preserve aspect ratio. Each pixel is one column wide and (paired) one text
|
|
48
|
+
// row holds two pixels, so square pixels keep the picture's proportions.
|
|
49
|
+
let height = Math.max(2, Math.round(width * (meta.height / meta.width)));
|
|
50
|
+
if (height % 2 === 1)
|
|
51
|
+
height += 1; // even rows pair cleanly into half blocks
|
|
52
|
+
const { data, info } = await pipeline
|
|
53
|
+
.resize(width, height, { fit: "fill" })
|
|
54
|
+
.ensureAlpha()
|
|
55
|
+
.raw()
|
|
56
|
+
.toBuffer({ resolveWithObject: true });
|
|
57
|
+
const cols = info.width;
|
|
58
|
+
const rows = info.height;
|
|
59
|
+
const at = (x, y) => {
|
|
60
|
+
const i = (y * cols + x) * info.channels;
|
|
61
|
+
return { r: data[i], g: data[i + 1], b: data[i + 2], a: data[i + 3] };
|
|
62
|
+
};
|
|
63
|
+
const opaque = (p) => p.a > threshold;
|
|
64
|
+
const lines = [];
|
|
65
|
+
for (let y = 0; y + 1 < rows; y += 2) {
|
|
66
|
+
let line = "";
|
|
67
|
+
let pendingBlanks = "";
|
|
68
|
+
for (let x = 0; x < cols; x++) {
|
|
69
|
+
let top = at(x, y);
|
|
70
|
+
let bottom = at(x, y + 1);
|
|
71
|
+
if (base) {
|
|
72
|
+
// Composite over the background: every cell becomes opaque.
|
|
73
|
+
const t = composite(top, base);
|
|
74
|
+
const b = composite(bottom, base);
|
|
75
|
+
line += `${fg(t)}${bg(b)}${UPPER_HALF}${RESET}`;
|
|
76
|
+
continue;
|
|
77
|
+
}
|
|
78
|
+
const topOn = opaque(top);
|
|
79
|
+
const bottomOn = opaque(bottom);
|
|
80
|
+
let cell;
|
|
81
|
+
if (!topOn && !bottomOn) {
|
|
82
|
+
cell = " ";
|
|
83
|
+
}
|
|
84
|
+
else if (topOn && bottomOn) {
|
|
85
|
+
cell = `${fg(top)}${bg(bottom)}${UPPER_HALF}${RESET}`;
|
|
86
|
+
}
|
|
87
|
+
else if (topOn) {
|
|
88
|
+
cell = `${fg(top)}${UPPER_HALF}${RESET}`;
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
cell = `${fg(bottom)}${LOWER_HALF}${RESET}`;
|
|
92
|
+
}
|
|
93
|
+
// Defer runs of blanks so a transparent right edge does not bloat the
|
|
94
|
+
// line with trailing spaces, while interior gaps stay aligned.
|
|
95
|
+
if (cell === " ") {
|
|
96
|
+
pendingBlanks += " ";
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
line += pendingBlanks + cell;
|
|
100
|
+
pendingBlanks = "";
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
lines.push(line);
|
|
104
|
+
}
|
|
105
|
+
return lines;
|
|
106
|
+
}
|
|
107
|
+
/** Convenience wrapper returning the rendered art as a single string. */
|
|
108
|
+
export async function renderToString(input, opts = {}) {
|
|
109
|
+
return (await renderToLines(input, opts)).join("\n");
|
|
110
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "pixelati",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Turn any image into truecolor terminal art using half-block characters.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"pixelati": "dist/cli.js"
|
|
8
|
+
},
|
|
9
|
+
"main": "dist/index.js",
|
|
10
|
+
"types": "dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"import": "./dist/index.js"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "tsc",
|
|
22
|
+
"pixelati": "tsx src/cli.ts",
|
|
23
|
+
"start": "tsx src/cli.ts",
|
|
24
|
+
"prepublishOnly": "tsc"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"terminal",
|
|
28
|
+
"ansi",
|
|
29
|
+
"image",
|
|
30
|
+
"ascii-art",
|
|
31
|
+
"cli",
|
|
32
|
+
"truecolor",
|
|
33
|
+
"half-block"
|
|
34
|
+
],
|
|
35
|
+
"author": "DMXL",
|
|
36
|
+
"license": "MIT",
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "git+https://github.com/DMXL/pixelati.git"
|
|
40
|
+
},
|
|
41
|
+
"homepage": "https://github.com/DMXL/pixelati#readme",
|
|
42
|
+
"bugs": {
|
|
43
|
+
"url": "https://github.com/DMXL/pixelati/issues"
|
|
44
|
+
},
|
|
45
|
+
"publishConfig": {
|
|
46
|
+
"access": "public"
|
|
47
|
+
},
|
|
48
|
+
"sideEffects": false,
|
|
49
|
+
"packageManager": "pnpm@10.9.0",
|
|
50
|
+
"engines": {
|
|
51
|
+
"node": ">=18"
|
|
52
|
+
},
|
|
53
|
+
"dependencies": {
|
|
54
|
+
"sharp": "^0.34.4"
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@types/node": "^22.0.0",
|
|
58
|
+
"tsx": "^4.21.0",
|
|
59
|
+
"typescript": "^5.6.0"
|
|
60
|
+
}
|
|
61
|
+
}
|