Siguiendo con los tutoriales de canvas, hoy veremos cómo aplicar recortes de ciertas secciones de las imágenes que es conocido como una operación crop de las imágenes que queramos establecer; como ya sabes con el canvas es posible escalar e incluso recortar imágenes dibujadas en el lienzo (en nuestro canvas) todo con sólo una función llamada drawImage(); como veremos en este artículo, según la cantidad de parámetros presentes en la misma, varía su modo o uso; veamos:

Parámetros de la función drawImage() para dibujar en el canvas

Según los parámetros que se definen en la w3schools: HTML canvas drawImage() estos son los parámetros del método drawImage():

Parámetro	Descripción
Elemento:	Imagen, video o canvas a usar; en nuestro caso será el lienzo canvas.
sx:	Opcional. La coordenada x en donde empieza el recorte dentro del elemento.
sy:	Opcional. La coordenada y en donde empieza el recorte dentro del elemento.
swidth:	Opcional. El ancho del área de recorte.
sheight	Opcional. El largo del área de recorte.
x:	La coordenada x en donde se empezará a pintar en el canvas.
y:	La coordenada y en donde se empezará a pintar en el canvas.
width:	Opcional. El ancho a usar; la misma permite escalar la imagen a lo ancho.
height:	Opcional. El largo a usar; la misma permite escalar la imagen a lo largo.

Dibujando una imagen al Canvas

Lo primero que debemos hacer es una vez que tengamos nuestra imagen que queramos emplear, la especificamos en nuestra imagen:

Simplemente tomamos una imágen fuente de la cual queremos aplicar el recortado mediante JavaScript:

<img src="/public/images/example/paisaje/paisaje.jpg" alt="paisaje" title="paisaje" id="paisaje">

Y nos queda en nuestro experimento algo así:

Y se procede a pintar la imagen anterior en el Canvas:

var img = document.getElementById('paisaje');
drawImage(img, x, y);

Es copiada la imagen (img) al Canvas a partir de los puntos definidos por x y y; si se desea copiar la imágen completa, las coordenadas x y y deben de ser cero.

En el siguiente ejemplo podemos apreciar que a medida que aumentan x y y el área mostrada de la fotografía es menor:

 

Escalando una imagen

drawImage(image, x, y, width, height);

Es copiada la imagen (img) al Canvas a partir de los puntos definidos por x y y con la anchura y altura definida por width y height.

En el siguiente ejemplo es fácil apreciar que a medida que aumenta el height o alto del canvas, la imagen dibujada en el canvas es escalada:

 

Recortando y Escalando una imagen con JavaScript

Este es el modo más complicado; ya que básicamente hay que indicar los datos para poder recortar y luego escalar la imagen; noten que aquí emplearemos todos los parámetros:

drawImage(image, sx, sy, swidth, sheight, x, y, width, height);

Es copiada la imagen (img) y la cortamos a partir de los puntos sx y sy con la anchura y altura definida por swidth y sheight.

A este punto tendríamos la selección lista; en los editores de imágenes como GIMP sería conceptualmente como si hubiese hecho la selección con la herramienta de recorte (sólo la selección).

Se escala la imagen; de esto se encargar los últimos cuatro parámetros, el sexto y séptimo parámetro x y y posiciona en el eje X y Y el lugar donde se desea dibujar la imagen en el canvas, se indica el ancho y largo que se desea que tenga la imagen con width y height, si no se quiere escalar la imagen los dos últimos parámetros deben ser iguales a swidth y sheight, de esta forma sólo se recortará la imagen más no se escalará como podemos apreciar en el siguiente ejemplo.