Crea tu web, tutor html, css

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). Es la fomra más simple de crear una imagen: definiendo los putnos que la forman.

La imagen de mapa de bits es un objeto imageData

  • imageData(): se usa para crear el objeto.
  • getImageData(): método de imageData para copiar los pixels de una región del canvas
  • putImageData(): méodo de imageData para dibujar en el canvas una imagen a partir de sus pixels

Este objeto tiene usan tres propiedades

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

Este objeto tambien puede ser ceado a partir de un contexto Canvas 2D con el método createImageData()

Cada pixel viene definido por cuatro valores: Rojo, Verde, Azul, Opacidad. Cada uno va de 0 a 255 para indicar la intensidad así si el primer pixel de una imagen con nombre miImagen va en rojo y opaco sería miImagen.data[0] = 255, miImagen.data[1] = 0, miImagen.data[1] = 0, miImagen.data[3] = 255. Es decir 255 (máximo) de componente rojo, 0 de verde y 0 de azul y máxima opacidad.

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 miImagen (imageData) va desde miImagen.data[4*n] a miImagen.data[4*n+3), ojo que n comienza en 0, el primer pixel es el 0, el segundo es el 1 y así hasta el último.

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. Recuerda que los colores son mezclas de rojo (Rojo), verde (Green) y azul (Blue), y además pueden ser totalmnente opacos (255 para el cuarto componente) o transparente (0 para el cuarto componente). 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 copiada a partir del punto dado por x1, y1 que es la esquina superior izquierda del recorte copiado.

El objeto imageData permite manipular las imágenes a nivel de pixels.