ASCII Text

Instead of drawing to a <canvas>, get the ASCII art back as a plain multi-line string you can use anywhere — copy to clipboard, print to a terminal, pipe to a file, or drop into SSR templates. Synchronous, no DOM required.

Note

The string contains only printable characters and newlines — no colors, no canvas. Use asciiTextAnsi if you want ANSI color codes for terminal output.

Try it

Pick an image, tweak the charset and font size — the output string updates live. Hit copy text to grab it.

size

asciify() → canvasvisual

asciiText() → string

Error: Failed to load image: https://picsum.photos/seed/mtn/300/200

Left: rendered to canvas via asciify() — Right: plain string returned by asciiText(), same options applied to both

API

fnasciiText(source, options?, targetWidth?, targetHeight?)

→ string

Convert an image, video frame, or canvas to a plain multi-line ASCII string. Rows are separated by newline characters. Synchronous — source must be already loaded.

fnasciiTextAnsi(source, options?, targetWidth?, targetHeight?)

→ string

Same as asciiText but wraps each character in ANSI truecolor escape codes (ESC[38;2;R;G;Bm). Prints coloured ASCII art in any terminal that supports ANSI color.

Basic usage

ascii-text.ts

import { asciiText, asciiTextAnsi } from 'asciify-engine';

const img = document.querySelector('img')!;

// Plain string
const text = asciiText(img, { fontSize: 8, charset: ' .:-=+*#%@' });
navigator.clipboard.writeText(text);

// ANSI coloured — pipe to a terminal
const ansi = asciiTextAnsi(img, { fontSize: 8, colorMode: 'fullcolor' });
process.stdout.write(ansi);

Server-side (Node.js)

Note

asciiText requires the source to be already loaded. In Node.js, use a canvas library like @napi-rs/canvas to decode the image first.

ssr.ts

import { createCanvas, loadImage } from '@napi-rs/canvas';
import { asciiText } from 'asciify-engine';

async function imageToAscii(path: string): Promise<string> {
  const img    = await loadImage(path);
  const canvas = createCanvas(img.width, img.height);
  const ctx    = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // @napi-rs/canvas shapes are compatible with HTMLCanvasElement
  return asciiText(canvas as unknown as HTMLCanvasElement, {
    fontSize: 10,
    charset: ' .:-=+*#%@',
  });
}

const art = await imageToAscii('./photo.jpg');
console.log(art);

Controlling output dimensions

Pass targetWidth and targetHeight to control grid size independently of the source image resolution.

// Classic 80×40 terminal dimensions
const text = asciiText(img, { fontSize: 8 }, 80 * 8, 40 * 8);

With art style presets

with-preset.ts

import { asciiText, ART_STYLE_PRESETS, DEFAULT_OPTIONS } from 'asciify-engine';

const options = {
  ...DEFAULT_OPTIONS,
  ...ART_STYLE_PRESETS.terminal,
  fontSize: 8,
};

const text = asciiText(img, options);