Generar imágenes pixeladas con JavaScript y lienzo-pixel display
| Autor: | GRA0007 |
|---|---|
| Views Total: | 933 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 23, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Pixel display es una divertida librería JavaScript que genera imágenes pixeladas a partir de objetos JavaScript usando el lienzo HTML5.
También tiene la capacidad de pixelar una imagen regular que usted proporciona.
Además, la biblioteca le permite animar las imágenes pixeladas generadas en un intervalo determinado.
Funcionamiento
Descargue e importe la versión minimizada de la biblioteca de visualización de píxeles en el documento.
<script src="/path/to/pixeldisplay.min.js"></script>
Cree un elemento canvas HTML con los siguientes atributos de de datos :
- densidad de datos
- Data-pixel-height
- Data-pixel-width.
- Data-Foreground-color
- Data-background-color
<canvas id="display" densidad de datos="10"></canvas>
Inicializa la biblioteca de pantallas de píxeles y ya estamos listos para irnos.
var instance = new Display('#display'); Renderizar una imagen desde un objeto JavaScript.
var myData = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ]; instance.renderArray(myData);
Pixelar una imagen.
instance.renderImage('image.png'); Anima imágenes pixeladas.
var myAnimation = new Animation(instance, [imageArray1, imageArray2], delay=1000); // starts the animation myAnimation.start(); // stops the animation myAnimation.stop();
