Escalado y recorte en imágenes en canvas

  • Por
Escalado y recorte de imágenes en el elemento canvas. Como cambiar el tamaño y recortar las imágenes al dibujarlas en el lienzo de canvas del HTML 5.

En pasados artículos del Manual de Canvas estuvimos viendo cómo incluir imágenes, es decir, como dibujar el contenido de una imagen en el lienzo de un elemento canvas del HTML 5. Seguiremos con las explicaciones en el presente texto, ofreciendo unas notas adicionales sobre el tratamiento de imágenes en Canvas, que nos permitirán redimensionar y recortar las imágenes antes de pintarlas.

El método es bien simple y consiste en invocar al método que dibuja las imágenes, drawImage(), enviando distintos juegos de parámetros. Anteriormente ya habíamos trabajado con este método, que como debemos saber, pertenece al objeto contexto de un canvas. En el pasado lo llamamos simplemente enviándole la imagen y las coordenadas donde había que colocarla. Ahora vamos a ver los otros dos modos de invocarlo, por medio de parámetros adicionales, que nos faltan por conocer. El primero de los modos de invocación permite escalar una imagen y el segundo recortarla y escalarla en un mismo paso.

Escalar una imagen

Redimensionar una imagen es sencillo. Simplemente tenemos que invocar al método drawImage() enviando además las dimensiones de la imagen que queremos que se dibuje. El navegador escalará la imagen para que tenga las dimensiones que indiquemos y luego la pintará en el canvas.

Las nuevas dimensiones de la imagen a dibujar pueden ser las que deseemos. Pueden incluso no ser proporcionales a las dimesiones actuales, en ese caso el navegador estirará la imagen o la achatará para adaptarla a la anchura y altura que hayamos indicado.

La manera de llamar a este método del contexto del canvas es la siguiente:

drawImage(imagen, posX, posY, anchura, altura);

Este método dibujará la imagen en la posición definida por las coordenadas (posX, posY) y con la anchura y altura dadas en los últimos dos parámetros.

Así que podemos ver un ejemplo de código escalando la imagen:

var ctx = cargaContextoCanvas('micanvas');
if(ctx){
   //Creo una imagen conun objeto Image de Javascript
   var img = new Image();
   //indico la URL de la imagen
   img.src = 'logo-desarrolloweb.gif';
   //defino el evento onload del objeto imagen
   img.onload = function(){
      //incluyo la imagen en el canvas escala muy pequeña
      ctx.drawImage(img, 0, 0, 50 , 24);
      //un poco mayor
      ctx.drawImage(img, 70, 10, 80 , 38);
      //tamaño natural
      ctx.drawImage(img, 160, 20);
   }
}

Este ejemplo dibuja la misma imagen tres veces, dos de ellas está escalada a distintas dimensiones y la última está a tamaño natural (sin redimensionar).

Puedes ver el ejemplo en funcionamiento en una página aparte.

Recortar y escalar una imagen

El último modo de invocar al método drawImage() es un poco más complejo, ya que le tenemos que indicar todos los datos para poder recortar y escalar la imagen antes de dibujarla en el canvas. La llamada tendrá estos parámetros:

drawImage(imagen, imgX, imgY, imgAncho, imgAlto, lienzoX, lienzoY, LienzoAncho, LienzoAlto)

Entre los parámetros, "imagen" sigue siendo el objeto imagen Javascript que queremos pintar. Todos los parámetros siguientes los podemos entender a la vista de la siguiente imagen:

Podemos ver a continuación el código de un ejemplo que realiza el recorte y escalado de una imagen.

var ctx = cargaContextoCanvas('micanvas');
if(ctx){
   //Creo una imagen conun objeto Image de Javascript
   var img = new Image();
   //indico la URL de la imagen
   img.src = 'sagrada-familia.jpg';
   //defino el evento onload del objeto imagen
   img.onload = function(){
      ctx.drawImage(img, 177, 11, 120 , 234, 10, 10, 90, 176);
      //tamaño natural
      ctx.drawImage(img, 160, 20);
   }
}

Este ejemplo dibuja una imagen un par de veces. Primero recorta un área de la imagen original y la escala, por el método de drawImage() que acabamos de relatar. Luego dibuja la imagen original, sin recortar ni escalar, y la coloca al lado de la otra, en el mismo canvas.

Para acabar, dejamos un enlace, de modo que puedas ver este segundo ejemplo de trabajo con imágenes en canvas.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

LUIS ARMANDO ACOSTA

16/9/2010
Felicitar y proponer
Me parece que es un excelente manual. Felicidade spor el trabajo relzado.

Me parece que podrian haber finalizado el tutorial con un ejemplo donde se va escalando la imagen conforma vas moviendo el mouse en una imagen previamente dibujada en otro canvas.

Swicher

16/5/2014
Aclaracion importante
Es importante aclarar que si el ancho y alto del objeto Canvas son los mismos que el tamaño final al que quedara la imagen una vez escalada, entonces la imagen no se va a dibujar, por lo que en estos casos se debe usar ctx.drawImage(img, 0, 0, ancho, alto);
Parece un detalle tonto, pero cuando esto pasa no aparece ningún error o advertencia y estuve un buen rato probando para ver por que el Canvas no dibujaba la imagen escalada.

Raquel SV

21/8/2015
Muchas gracias
Fantástica explicación y con el dibujo se entiende muy bien. ¡Muchas gracias!

mario sarmiento diaz

15/11/2015
problemas en el canvas
hola oyes tengo un problema no se si me puedas ayudar, quisiera saber porque en canvas al pintar una imagen no respeta el verdadero tamaño, es decir si yo pongo una etiqueta de img con una imagen de 32px por 32px y pongo esa misma imagen en el canvas sacado el tamaño a través de jquery de la imagen en la etiqueta del img para que sean exactamente iguales, la imagen en el canvas se pinta mas grande que la imagen en la etiqueta de img.