DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
05-05-2014

Con Canvas es posible escalar e incluso recortar imágenes dibujadas en el lienzo (en el 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; veamos:

Parámetros de la función drawImage()

Segun define la w3schools estos son los parámetros del método drawImage():

Parámetro Descripción
Elemento: Imagen, video o Canvas a usar.
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

Este es el modo más sencillo; simplemente tenemos una imágen fuente:

paisaje

Y se procede a pintar la imagen en el Canvas:

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 imagen 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

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 cortaremos 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 solo se recortará la imagen más no se escalara como podemos apreciar en el siguiente ejemplo:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Algunos artículos que te pueden interesar

Primeros pasos con la APi de Soundcloud con JavaScript

Primeros pasos con la APi de Soundcloud con JavaScript

Se explica como emplear la API de Soundcloud para crear widget de canciones en nuestra página web controlar los widgets en base a eventos.

Andrés Cruz 27-04-2017

Los web workers para ejecutar JavaScript en paralelo

Los web workers para ejecutar JavaScript en paralelo

Los web workers permiten ejecutar secciones de código de archivos JavaScript en paralelo en un hilo aparte; en esta entrada veremos cómo trabajar con los web workers.

Andrés Cruz 01-10-2015

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados.

Andrés Cruz 15-05-2014