ascii-image

<ascii-image> is a Web Component that displays an image as ASCII art.

By default, the ASCII image is scaled to 80 columns because old school terminals could only show 80 characters on a single line.

You can use the columns attribute to specify the number of columns to use when the ASCII art is generated.

Example

<ascii-image src="demo/all-the-things.png" columns="90"></ascii-image>

Installation

Install ascii-image as a dependency:

npm install ascii-image --save

Import it as an ES module:

import AsciiImage from 'ascii-image'
window.customElements.define('ascii-image', AsciiImage);

In your HTML, you can use like any other HTML tag:

<ascii-image src="demo/all-the-things.png" columns="90"></ascii-image>

Here's a vanilla JS codesandbox.

Tests

npm install -g web-component-tester
wct

Credits

• A Basic ASCII Art Algorithm
• Character representation of grey scale images

License

The MIT License