Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Ascii Image

Web Component Ascii Image


Today we approach to Ascii Art because not everything will be serious web components. With ascii-image you can transform and display the result of converting an image to characters. It may not be particularly useful in your developments, but perhaps you can have a wonderful detail with your friends, partner, family, ... or print it on a t-shirt (

The ascii transformation is done thanks to the library asciify.

Here are some examples. But if you go to the bottom of the page you can generate your own Ascii Art from the link to an image.

Component use

The url of this cloud web component is http://www.wpiece.com/p/19_43

Do not forget to include before the component's import the polyfill for web components.

To use it with its basic configuration you need only include it and indicate the original image to present in ascii mode.

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/19_43" />
</head>

<body>
	<ascii-image src="http://your.image.com/name.jpg"></ascii-image>
</body>
</html>

Some examples

Basic example

<ascii-image
	src="img/vintage-races-18.jpg">
</ascii-image>

Changing size

<ascii-image
	src="img/vintage-races-21.jpg"
	size="650"
	font-size="3">
</ascii-image>

Changing color

<ascii-image
	src="img/vintage-races-16.jpg"
	size="650"
	font-size="3"
	color="770077">
</ascii-image>

Changing background color

<ascii-image
	src="img/vintage-races-1.jpg"
	size="650"
	font-size="3"
	background-color="6A4A3C"
	color="EDC951">
</ascii-image>

Generate your own Ascii Art

IMPORTANT: If you use a desktop Chrome browser you can also download it as an image.