Escalado y recortando imágenes con Canvas
05-05-2014 - Andrés Cruz
In englishEste material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.
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.