Clonar una imagen a un conjunto de divs utilizando #jquery, #javascript y #canvas.

Esta entrada veremos cómo podemos clonar una imagen (jpg, png) a código html, es decir, pintar por medio de divs una imagen deseada.

Recalco que no es muy útil hacer esto, la utilidad de esta entrada es que vean como por medio de canvas, se puede recorrer una imagen y a su vez obtener pixel a pixel de esta.

A continuación pongo el ejemplo corriendo, solo den clic en el botón “dibuja en HTML” y esperen ya que tarda algunos segundos en realizar la acción.

Y podemos ver en esta imagen que son divs sin duda:

div clonados con canvas

Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:

CSS

 
.pixel{			
float:left;			
width:1px;			
height:1px;		  
}

HTML

 <img id="imagen" width="200" height="200"  src="../img/images/galaxia.jpg" />
    <br />

<input type="button" value="dibuja en HTML" onclick="dibuja()" />
<div id="mensaje" style="font-weight:bold"></div>

<div id="imagenHTML"></div>

Javascript

//función que ejecuta el botón
function dibuja(){
	$("#mensaje").html("Espere un momentos, se esta dibujando la imagen!");

	//comienza a dibujar despues de 1 segundo, para mostrar el mensaje anterior.
	setTimeout(dibujar,1000)

}

//Esta es la función que realiza la acción principal
//funcion que realiza la clonacion de la imagen a divs
function dibujar(){
	//guardamos la imagen en una variable
	var img = $('#imagen')[0];

	//creamos un canvas y le definimos el mismo tamaño a la imagen
	var canvas = $('<canvas/>')[0];
	canvas.width = img.width;
	canvas.height = img.height;
	//Le asignamos la imagen al canvas, ya que nos ayudara el canvas para poder obtener los pixeles de la imagen real
	canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

	//definimos el tamaño del div para que sea el mismo ancho de la imagen
	//de esta manera al pintar los divs hijos que representaran los pixeles
	//formen la imagen y den el salto automatico cuando corresponda
	$("#imagenHTML").html("")
	$("#imagenHTML").css({"width":canvas.width+"px"})

	//realizamos el recorrido de los pixeles del canvas tomando el ALTO como maximo valor a recorrer
	for(y=0;y<canvas.height;y++){

		//realizamos el recorrido de los pixeles del canvas tomando el ANCHO como maximo valor a recorrer
		for(x=0;x<canvas.width;x++){
			//obtenemos el color en rgb del pixel actual
			var rgb = canvas.getContext('2d').getImageData(x,y,x+1,y+1).data;
			//obtenemos el rojo verde y azul del rgb anterior
			 var red = quitaCero(rgb[0].toString(16), 2);
             var green = quitaCero(rgb[1].toString(16), 2);
             var blue = quitaCero(rgb[2].toString(16), 2);

			 //obtenemos el hexadecimal con lso colores anteriores
             var hex = red + green + blue;

			 //y por ultimo creamos un div con la clase pixel que tiene el color hexadecimal
			$("#imagenHTML").append("<div class='pixel' style='background:#"+hex+"'></div>");
		}

	}

	//se termino de pintar y borramos el mensaje de texto que se puso al inicio
	$("#mensaje").html("");
}

//Función que nos ayuda a agregar al arreglo un 0 a una cadena cuando la longitud recibida no se cumple
var quitaCero = function(num, longitud) {
    return Array(longitud + 1 - (num + '').length).join('0') + num;
}

Quizá no sirva de mucho hacer esto ya que es lento, pero les servirá para algo el saber que pueden recorrer una imagen por sus pixeles por medio de javascript y el grandioso elemento agregado en html5 de nombre canvas.
Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.

Algoritmo de ordenamiento Quicksort en Javascript animado con jquery

En esta entrada utilizare el algoritmo de quicksort en javascript que publique anteriormente y lo acomode de una manera especial para poder mostrar poco a poco como se va ordenando un conjunto de números por medio de este método de ordenamiento.

Para el que no conozca la función que estoy utilizando setTimeout, esta simplemente se encarga de ejecutar una función o un código después de pasar cierto tiempo, en este caso puse 500 que es medio segundo. Hago uso de esta función par que se pueda notar el ordenamiento y no sea instantáneo.

A continuación anexo el ejemplo animado, solo denle clic en el botón comenzar:

Y ahora el código que hace posible esta demostración:

CSS

.bloque{
float:left;
margin-left:5px;
margin-bottom:2px;
width:20px;
height:20px;
text-align::center;
padding:5px;
background:#fff;
}

HTML


<div id="contenido" style=" background:#efefef; height:90px; padding:10px;"></div>
<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Javascript


//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,0,5,6,9,17,10,4,5,3,2,3,4,5,6,7,88,77,66,55,44,33,21,2,33,44,73,78,9,2,3,0,1,8,1,13];

imprimirArreglo();

function comenzar(){

//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));

//desabilitamos boton
$("#botonsito").prop("disabled",true)

}

//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){

//borramos el contenido del div del contenido
$("#contenido").html("");

//imprimimos los elementos en forma de div
for(i_=0;i_<arreglo.length;i_++){

//anexamos un div con clase bloque
$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
}

}

//función quicksort
function quicksort(primero,ultimo){
//definimos variables indices
i = primero
j = ultimo

//sacamos el pivote de la mitad del arreglo
pivote = arreglo[parseInt((i+j)/2)];

iteracionQS(i,j,pivote,primero,ultimo)

}

//funcion que suplanta el while y se llama recursivamente
function iteracionQS(i,j,pivote,primero,ultimo){

//mientras arreglo[i] sea menor a pivote
while(arreglo[i]<pivote)
i++;
//mientras j sea mayor a pivote
while(arreglo[j]>pivote)
j--;

//si el indice i es menor o igual a j entonces intercambiamos
if(i<=j){

//variable temporal auxiliar para guardar valor de arreglo[j]
aux=arreglo[j];

//intercambiamos los valores de arreglo[j] y arreglo[i]
arreglo[j] = arreglo[i]
arreglo[i] = aux

// incrementamos y decrementamos i y j
i++;
j--;

imprimirArreglo(arreglo);
}

//repetimos
if(i<j){
//hacemos una pausa de medio segundo
setTimeout(function(){
iteracionQS(i,j,pivote,primero,ultimo)
},500);
}else{
//si primero es menor a j llamamos la funcion nuevamente
if(primero<j){

//pausa de medio segundo
setTimeout(function(){
quicksort(primero,j);
},500);
}
//si ultimo es mayor que i llamamos la funcion nuevamente
if(ultimo>i){

//pausa de medio segundo
setTimeout(function(){
quicksort(i,ultimo)
}
,500);
}
}
}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.

Algoritmo de ordenamiento Quicksort en javascript

El algoritmo quicksort es un algoritmo de ordenamiento, como su nombre lo dice, es de los más rápidos y es recomendable su uso (no como el de burbuja).

Ver quicksort animado con jquery.

Aquí anexo el algoritmo de quicksort en javascript:

Función Quicksort

function quicksort(primero,ultimo){
	//definimos variables indices
	i = primero
	j = ultimo

	//sacamos el pivote de la mitad del arreglo
    pivote = arreglo[parseInt((i+j)/2)];

	//repetir hasta que i siga siendo menor que j
	do{

		//mientras arreglo[i] sea menor a pivote
		while(arreglo[i]<pivote) 			i++; 		//mientras j sea mayor a pivote 		while(arreglo[j]>pivote)
			j--;

		//si i es menor o igual a j, los valores ya se cruzaron
		if(i<=j){

			//variable temporal auxiliar para guardar valor de arreglo[j]
			aux=arreglo[j];

			//intercambiamos los valores de arreglo[j] y arreglo[i]
            arreglo[j] = arreglo[i]
            arreglo[i] = aux

			// incrementamos y decrementamos i y j
            i++;
            j--;
		}

	}while(i<j);

	    //si primero es menor a j llamamos la funcion nuevamente
		if(primero<j){ 			quicksort(primero,j); 		} 		//si ultimo es mayor que i llamamos la funcion nuevamente 		if(ultimo>i){
		    quicksort(i,ultimo);
		}
}

Como utilizarlo


//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,24,34,54,5,4,2,99,2,3,1,0];

//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));

//imprimimos para ver el resultado
alert(arreglo)

Algoritmo de ordenamiento burbuja animado con jquery

En esta entrada hago uso del algoritmo burbuja en javascript que publique anteriormente, pero lo modifique para poder hacer una demostración utilizando jquery, de cómo va intercambiando los elementos en cada iteración, anexo el algoritmo funcionando, denle al botón comenzar para ver la animación hecha con jquery.

Y ahora el código completo y comentado:

CSS

.bloque{
	float:left;
	margin-left:5px;
	width:20px;
	height:20px;
	text-align::center;
	padding:5px;
	background:#fff;
 }

Código HTML


<div id="contenido" style=" background:#efefef; height:30px; padding:10px;"></div>

<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Código Javascript/Jquery


//variables globales

arreglo=[11,15,12,8,1,5,4,2,99,2,3];
var i=0,j=0;
var iteracion; //sirve para guardar el evento de tiempo y poder pararlo

$(document).ready(function(){

	imprimirArreglo(arreglo)

});

function comenzar(){

	//comienza la iteracion con velocidad de 3 decimas de segundo cada iteración
	iteracion=setInterval(burbuja,300);

	//desabilitamos boton
	$("#botonsito").prop("disabled",true)

}

//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){

	//borramos el contenido del div del contenido
	$("#contenido").html("");

	//imprimimos los elementos en forma de div
	for(i_=0;i_<arreglo.length;i_++){

		//anexamos un div con clase bloque
		$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
	}

}

function burbuja(){
	//recorreremos todos los elementos hasta n-1
	if(i<arreglo.length){

		//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
	    if(j<(arreglo.length-i)){

			//comparamos
			if(arreglo[j]>arreglo[j+1]){
				 //guardamos el numero mayor en el auxiliar
				 aux=arreglo[j];
				 //guardamos el numero menor en el lugar correspondiente
				 arreglo[j]=arreglo[j+1];
				 //asignamos el auxiliar en el lugar correspondiente
				 arreglo[j+1]=aux;

			}

			j++;
		}else{
			j=0;
			i++;
		}

	}else{
	    //aqui se termina el algoritmo por lo cual paramos el setInterval
		clearInterval(iteracion);

	}

	//imprimimos el arreglo en cada iteración
	imprimirArreglo()

}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.

Las funciones setInterval y clearInterval son funciones de javascript, la primera sirve para ejecutar un código cada cierto tiempo, la segunda detiene las iteraciones de la primera.

Algoritmo de ordenamiento Burbuja en javascript

El algoritmo de ordenamiento burbuja (burbuja mejorada en este caso), es un algoritmo sencillo para ordenar elementos, ha llegado a no ser recomendado por su gran cantidad de iteraciones, pero no está demás conocerlo para comprender algoritmos de ordenamiento de más complejidad y mayor utilidad.

Ver algoritmo burbuja animado utilizando jquery.

A continuación plasmo la función en javascript y como utilizarla:

Función javascript

function burbuja(arreglo){
	//recorreremos todos los elementos hasta n-1
	for(i=0;i<(arreglo.length-1);i++)
	//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
	for(j=0;j<(arreglo.length-i);j++){

		//comparamos
		if(arreglo[j]>arreglo[j+1]){
			 //guardamos el numero mayor en el auxiliar
		     aux=arreglo[j];
			 //guardamos el numero menor en el lugar correspondiente
			 arreglo[j]=arreglo[j+1];
			 //asignamos el auxiliar en el lugar correspondiente
			 arreglo[j+1]=aux;

		}

	}

	return arreglo
}

Como utilizarlo

//arreglo a ordenar
var arregloAOrdenar=[1000,9,111,8,1,5,4,2,99,2,3];

//invocamos la función
arregloAOrdenar=burbuja(arregloAOrdenar);

//imprimimos para ver el resultado
alert(arregloAOrdenar)

¿Cómo crear una notificación con jquery, sin utilizar plugins?

En esta entrada vamos a ver cómo crear notificaciones con jquery en nuestro sitio web, de tal manera aparezca en un lugar donde el usuario la vea, puedes ver un ejemplo dando click aqui.

Existen muchos plugins pero en este artículo yo les enseñare como hacer sus propias notificaciones para que sean libres de modificarlas a su antojo.

Si nunca has utilizado jquery te recomiendo te des una vuelta por mi curso gratuito, que no te tomara más de 1 hora y te aseguro que al final sabrás utilizar bien esta librería.

Ahora vamos a lo divertido, primero anexo un código css el cual contiene nuestra clase de nombre Error, en este caso haremos una notificación de error, por lo cual pondré colores rojos:


.Error{
     position:absolute;
    z-index:32000;
    top:10px;
    left:50%;
    padding:5px;
    width:500px;
    margin-left:-255px;
    text-align:center;
     border: #d8d8d8 1px solid;
    background:#F8F8F8;
    color:#f00;
    font-weight:bold;
    opacity:0;
     font-size:1.2em;
}

El código anterior nos sirve para posicionar nuestra notificación, la cual aún no existe, la clase esta con opacity igual a 0 para que nuestro control tenga una animación de aparición inicial y le dé más estética, también le he asignado la posición top para que aparezca arriba y centrado, ustedes pueden diseñar su notificación a su antojo después de ver esta entrada.
En el siguiente código de javascript explico línea por línea que es lo que va haciendo:

function MensajeError(mensaje, time) {

	//si no se envia la variable time, esta se define por defecto en 6 segundos
    if (time === undefined) time = 6000;

	//agregamos el div a nuestra pagina con la clase css Error anteriormente hecha
    $("body").append("&lt;div class='Error'&gt;&lt;/div&gt;");

     //asignamos el texto del error al div que creamos
    $(".Error").html(mensaje);

    //aqui procedemos a crear la animación para que el div se muestre y se oculte despues de cierto tiempo
    $(".Error")
  .animate({ //seleccionamos el div
      opacity: 1 //aparece
  }, 500  //la animación se realiza medio segundo
          , function () { //ejecutamos un callback con función anonima para desaparecer la notificación despues de 6 segundos
              $(".Error").animate({ //seleccionamos nuevamente el div
                  opacity: 0 //ocultamos

              }, time   //tiempo de 6 segundos por defecto
              , function () {
				  				//al final en el callback del ultimo evento eliminamos el div de la pagina.
				  				 $(this).remove();
			  				}
              )
          })
}

Si nunca han utilizado la función anímate() de jquery te recomiendo te des una vuelta por mi artículo donde explico con detalle su funcionalidad.
Y bueno así de sencillo se hace una notificación con jquery sin utilizar plugins extras ni nada, ya solo queda invocarla asi: MensajeError(‘¡un error fatal!’).

Como ubicar mapa de google maps en un domicilio en específico #googleMaps

Para ubicar nuestro mapa de google maps en un domicilio en específico, vamos primero a crear nuestro mapa:

<div id="mapita"></div>
//creamos el mapa por medio del div con id mapita
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(88.1121, 103.12121)
};
map = new google.maps.Map(document.getElementById('mapita'),
mapOptions);

En seguida le daremos un domicilio por medio de texto y de la siguiente manera el mapa se centrara en el domicilio dado:

//lo ubicamos a una dirección en específico
geocoder = new google.maps.Geocoder();
var address = "Guadalajara Jalisco Mexico";

//buscamos el domicilio por medio de geocoder
geocoder.geocode({ 'address': address }, function (results, status) {
//si el domicilio se encuentra lo ubicamos
//no valla ser que ponen crater 1512 de Marte Sistema Solar

if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});