Mapa de bits

En el apartado dedicado a imágenes externas viste como cargar un archivo de imagen y colocarlo en un canvas. En este caso las imágenes no se cargan sino que están definidas por un mapa de bits, o sea, una lista de números (0-255) que definen el color de cada pixel de la imagen (un pixel es un punto de una imagen).

Para logar esto en el canvas existen tres métodos:

  • createImageData(): crea un objeto imageData, una lista de pixels
  • getImageData(): copia los pixels de una región del canvas
  • putImageData(): dibuja una imagen a partir de sus pixels

Estos métodos usan tres propiedades

  • width, hegith: ancho y alto de la imagen
  • data: lista con los datos de los pixels de la imagen

Cada pixel viene definidos por cuatro valores: Rojo, Verde, Azul, Opcidad. Cada uno va de 0 a 255 así el primer pixel de una imagen va en rojo y opaco sería imagen.data[0] = 255, imagen.data[1] = 0, imagen.data[1] = 0, imagen.data[3] = 255, Como ves el pixel primero va de data[0] a data[3], el segundo pixel va de data[4] a data[7]. En general el pixel n del objeto imagen (imageData)va desde imagen.data[4*n] a imagen.data[4*n+3), ojo que n comienza en 0.

Fíjate en este ejemplo en el que se define un rectángulo verde:

<canvas width="600" height="300" id="miPanel"></canvas>
<script>		
		var miImagen = new Image();
		var panel = document.getElementById('miPanel');
		lapiz = panel.getContext("2d");
		//Crear el objeto imageData de 100x100 pixels
		var imagen = lapiz.createImageData(100,100);
		//Cada cuatro pixels pongo el segundo en 255, verde, 
		// y el último en 255 (opaco)
		for (var i =0; i < imagen.data.length; i+=4){
			imagen.data[i]   = 0;
			imagen.data[i+1] = 255;
			imagen.data[i+2] = 0;
			imagen.data[i+3] = 255
		}
		lapiz.putImageData(imagen, 10,10);
</script> 
Prueba este código

Si mezclas los valores de data[0], data[1], data[2] puedes conseguir otros colores y variando el data[3] consigues que el color sea más o menos transparente. Pruébalo para ver bien su funcionamiento

Y también podemos copiar una parte de un canvas. Por ejemplo en el canvas dibujamos una imagen externa, luego se copiará la parte central y la pondremos en otra parte del mismo canvas

<img src="/canvas/paisaje2.jpg" style="display:none" id="paisaje">
<canvas width="600" height="500" id="miPanel" style="border: 1px solid black"></canvas>
<script>		  	
	  window.onload = function(){
	  		var panel = document.getElementById('miPanel');
			var miFoto =document.getElementById("paisaje");
			var lapiz = panel.getContext('2d');
			lapiz.drawImage(miFoto, 10, 10);
			//Copiar un cuadro de 100x100 pixels desde el punto (150,150)
			var imagen = lapiz.getImageData(150,150, 100, 100);
			//ponerlo en el lado derecho del canvas
			lapiz.putImageData(imagen, 420,10);
			}
</script> 
Prueba este código

Como ves lapiz.getImageData(x, y, w, h) compia un rectángulo con la esquina superior izquierda en x, y, siendo w y h el ancho y el alto del area copiada. El método putImageData(x1,y1) coloca la imagen ciopiada en el punto dado por x1, y1