Web Component Ascii Image


Hoy nos acercamos al Ascii Art por que no todo van a ser web components serios. Con ascii-image podréis transformar y presentar el resultado de convertir una imagen a caracteres. Quizás no os sea especialmente útil en vuestros desarrollos, pero quizás podáis tener un detalle maravilloso con vuestros amigos, pareja, familia,... o imprimirlo en una camiseta.

La transformación ascii se hace gracias a la librería asciify.

Os presentaremos algunos ejemplos. Pero si vas al final de la página podrás generar tus propias Ascii Art a partir del enlace a una imagen.

Uso del componente

La url de este cloud web component es http://www.wpiece.com/p/19_43

No olvides incluir antes de la importación del componente el polyfill para web components.

Para usarlo con su configuración básica no necesitas más que incluirlo e indicar la imagen original a presentar en modo ascii.

<!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>

Veamos algunos ejemplos

Ejemplo base

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

Cambiando el tamaño

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

Cambiando el color

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

Cambiando el color de fondo

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

Genera tus propios Ascii Art

IMPORTANTE: si utilizas un navegador Chrome de escritorio también podrás descargártela como imagen.