GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → uncompiled → ascii-image

uncompiled / ascii-image

Licence: MIT License
Web Component that displays an image as ASCII art

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

web-componentscustom-elementsascii-art

Projects that are alternatives of or similar to ascii-image

file-attachment-element
Attach files via drag and drop or file input.
Stars: ✭ 97 (+546.67%)
Mutual labels:  web-components, custom-elements
11ty-web-component-generator
Use the power of 11ty to generate web components (custom elements).
Stars: ✭ 51 (+240%)
Mutual labels:  web-components, custom-elements
element
Fast and simple custom elements.
Stars: ✭ 65 (+333.33%)
Mutual labels:  web-components, custom-elements
symbiote.js
Simple, light and very powerful library to create embedded components for any purpose, with a data flow management included.
Stars: ✭ 40 (+166.67%)
Mutual labels:  web-components, custom-elements
vue-custom-element
Vue Custom Element - Web Components' Custom Elements for Vue.js
Stars: ✭ 1,886 (+12473.33%)
Mutual labels:  web-components, custom-elements
modulor-html
Missing template engine for Web Components
Stars: ✭ 36 (+140%)
Mutual labels:  web-components, custom-elements
focus-trap
A lightweight web component that traps focus within a DOM node
Stars: ✭ 44 (+193.33%)
Mutual labels:  web-components, custom-elements
page-title
A Polymer element for easily updating a webpage's title, such as in a SPA.
Stars: ✭ 13 (-13.33%)
Mutual labels:  web-components, custom-elements
custom-element-boilerplate
Boilerplate for creating a custom element.
Stars: ✭ 137 (+813.33%)
Mutual labels:  web-components, custom-elements
g-emoji-element
Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
Stars: ✭ 112 (+646.67%)
Mutual labels:  web-components, custom-elements
grid-container
A grid for the future, CSS Grid Layout + Web Components (Custom Elements v1 + Shadow DOM v1)
Stars: ✭ 51 (+240%)
Mutual labels:  web-components, custom-elements
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (+40%)
Mutual labels:  web-components, custom-elements
esl
Lightweight and flexible UI component library based on web components technology for creating basic UX modules
Stars: ✭ 53 (+253.33%)
Mutual labels:  web-components, custom-elements
range-slider-element
🍬 <range-slider> custom element
Stars: ✭ 45 (+200%)
Mutual labels:  web-components, custom-elements
remote-input-element
An input element that sends its value to a server endpoint and renders the response body.
Stars: ✭ 72 (+380%)
Mutual labels:  web-components, custom-elements
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (+360%)
Mutual labels:  web-components, custom-elements
CalDOM
An agnostic, reactive & minimalist (3kb) JavaScript UI library with direct access to native DOM.
Stars: ✭ 176 (+1073.33%)
Mutual labels:  web-components, custom-elements
smart-webcomponents-community
Material & Bootstrap Web Components built with Smart
Stars: ✭ 30 (+100%)
Mutual labels:  web-components, custom-elements
lit-components
Moved to https://github.com/vaadin/component-mixins
Stars: ✭ 59 (+293.33%)
Mutual labels:  web-components, custom-elements
inclusive-elements
Accessible, lightweight, unstyled implementations of common UI controls.
Stars: ✭ 17 (+13.33%)
Mutual labels:  web-components, custom-elements
View All Similar Projects ➔

ascii-image

Published on webcomponents.org

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

ASCII image example

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

License

The MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].