Cubexy.js un plugin de jQuery para crear un generador de avatar y guardarlo como png

Cubexy.js un plugin de jQuery para crear un generador de avatar y guardarlo como png, sin duda una de las etiquetas que nos permite manipular html5 son las canvas, debido a que html5 tiene mucha flexibilidad para mostrar mezclas de archivos de imágenes esta se aprovecha de tal manera que permite crear una sola imagen a partir de varias partes independientes de imágenes, una prueba de que canvas puede hacer esto es la de generar un avatar a partir de colecciones.

Con este plugin puedes crear un generador de avatares, solo tienes que conservar una estructura de acuerdo a las imagenes que quieres mezclar.

Ejemplo: http://oscaruhp.github.io/CubexyJSAvatarGenerator/

1.- Para implementar este plugin se tiene que incluir jQuery y cubexy.js de la siguiente forma:

<!-- Bootstrap and JQuery -->
<script src="jquery-2.1.4.min.js"> </script>

<!-- Plugin -->
<script src="Cubexy.js"></script>

2.- Posteriormente a esto agrega la estructura de salida del plugin (Estos elementos son para el botón descargar, el botón pre visualizar el canvas o salida y el selector de color)

<canvas width="300" height="300" id="canvas"></canvas>
<a id="Descargar">Descargar</a>
<a id="Preview">Preview</a>
<input type="hidden" id="colores"  />

3.- También tienes que colocar la lista de imágenes que quieres mezclar

<div id="avatar">

<div id="Rostro" >
<img src="1_piel/1.png"/>
</div>

<div id="Ojos">
<img src="2_Ojos/1.png"/>
<img src="2_Ojos/2.png"/>
</div>

<div id="Pelo">
<img src="4_Pelo/3.png"/>
<img src="4_Pelo/2.png"/>
</div>

<div id="Boca">
<img src="3_Boca/11.png"/>
<img src="3_Boca/12.png"/>
</div>

</div>

4.- Por ultimo colocar la instancia del plugin cubexy.js de la siguiente forma:

 $('#avatar').Cubexy();

5.- También puedes personalizar las opciones del plugin como por ejemplo los estilos y los nombres de los estilos

{idInputColor:'colores',
						 idDownload:'Descargar', /* Button Download image */
						 idPreview:'Preview', /* Button Preview image */
						 CanvasSalida:'canvas',  /* Canvas result */
						 attImagenGrande:'src', /* Big Image merge */
						 cssDefault:true, /* use css default ? */
						 cssCambioColor:'actual', /* css Color Selector */
						 cssParteActiva:'activo', /* css part Selector */
						 cssParteUnica:'seleccionado', /* css image Selector */
						 cssColorPicker:'colors' /* css Color Picker Selector */
}

The post Cubexy.js un plugin de jQuery para crear un generador de avatar y guardarlo como png appeared first on Develoteca.