<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.
<ascii-image src="demo/all-the-things.png" columns="90"></ascii-image>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.
npm install -g web-component-tester
wct
The MIT License