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

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Sistema de particulas con Canvas

Sistema de particulas con Canvas

Esfera de agrupación

Esfera de agrupación

Algunos artículos que te pueden interesar

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

Dibujando un SeekBar personalizado en Android con Canvas

Dibujando un SeekBar personalizado en Android con Canvas

Se explica cómo crear un sencillo SeekBar mediante la API de Canvas en Android que consiste consiste de una barra lateral (un rectángulo achatado) y una circunferencia que hará la vez de control y es la que manipularemos mediante un clic.

Andrés Cruz 18-07-2017

El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos

El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos

Con solo CSS podemos crear efectos sobre nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp.

Andrés Cruz 20-01-2014