@zumer/snapdom-plugins · MIT

Export the capture as ASCII art.

Adds a toAscii() export method that converts captures to ASCII art. Plain text remains the default. Use toAscii({ format: 'html', contrast: 0.8 }) for a colored, compact HTML preview; contrast defaults to zero and does not change existing text exports.

Source · MIT Changelog Showcase demo

npm install @zumer/snapdom@latest @zumer/snapdom-plugins@latest

Usage

import { snapdom } from '@zumer/snapdom';
import { asciiExport } from '@zumer/snapdom-plugins/ascii-export';

const el = document.querySelector('#target');
const result = await snapdom(el, { plugins: [asciiExport({ width: 100 })] });
const art = await result.toAscii();
console.log(art);

Options

Option	Type	Default	Description
`width`	`number`	`80`	Character width of output
`charset`	`string`	`' .:-=+*#%@'`	Characters from lightest to darkest
`invert`	`boolean`	`false`	Invert luminance mapping
`format`	`'text' \| 'html'`	`'text'`	Plain text, or colored HTML in a `<pre>`
`contrast`	`number`	`0`	Non-negative luminance contrast boost

toAscii({ width, charset, invert, format, contrast }) overrides any of them per call.

The conversion is also exported on its own. asciiFromCanvas(source, options) turns any drawable (a canvas, an image, a video frame) into ASCII with the same options. Run it on every frame of a @zumer/snapdom-stream stream for a live ASCII mirror:

import { stream } from '@zumer/snapdom-stream';
import { asciiFromCanvas } from '@zumer/snapdom-plugins/ascii-export';

const live = stream(el, { fps: 15, onFrame: (frame) => (pre.textContent = asciiFromCanvas(frame.canvas, { width: 100 })) });
await live.ready;
live.stop();