- jpg: formato comprimido con pérdida de calidad y sin transparencia.
- png: formato comprimido sin pérdida de calidad y con posibilidad de transparencia.
En general usaremos el formato jpg por ser de tamaño más reducido, a no ser que no queramos que la imagen pierda calidad o queramos usar una imagen con transparencia, en cuyo caso usaremos el formato png.
Para dibujar una imagen en el canvas usaremos la función drawImage del contexto del canvas (context.drawImage()), que tiene varias posibilidades:
- context.drawImage(img, x, y): dibuja la imagen entera y sin escalar en el canvas, poniendo su esquina superior izquierda en el punto x,y del canvas.
- context.drawImage(img, x, y, ancho, alto): posiciona la imagen en el punto x,y del canvas y la reescala para que tenga la anchura y altura especificadas.
- context.drawImage(img, ox, oy, oancho, oalto, x, y, ancho, alto): coge un trozo de la imagen a partir del punto ox,oy, de anchura oancho y altura oalto y lo coloca en el canvas en el punto x, y, reescalándolo para que tenga la anchura ancho y altura alto.
Ejemplo
usaremos la siguiente imagen, que se puede guardar con click derecho del ratón sobre ella y "Guardar imagen". La guardaremos como planeta.jpg.
En el mismo directorio en que tengamos la imagen creamos un archivo html con el siguiente contenido.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="my_canvas" width="300px" height="200px"
style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imagen = new Image();
imagen.onload = pinta;
imagen.src = 'planeta.jpg';
function pinta(){
// pintamos la imagen en la esquina superior izquierda del
// canvas, con el tamaño original.
ctx.drawImage(imagen, 0, 0);
// pintamos la imagen en en el punto 110, 0, reescalada.
ctx.drawImage(imagen, 110, 0, 1.5*imagen.width,
0.5*imagen.height);
// pintamos un trozo de imagen, el cuadrante inferior
// derecho, en el punto 0, 110, sin reescalar.
ctx.drawImage(imagen, 50, 50, 50, 50, 0, 110, 50, 50);
// reescalado (doble altura)
ctx.drawImage(imagen, 50, 50, 50, 50, 110, 110, 50, 2*50);
}
</script>
</body>
</html>
Como nota interesante del ejemplo, ver que el objeto de tipo Image tiene un par de campos width y height desde los que podemos recuperar la anchura y altura de la imagen.
No hay comentarios:
Publicar un comentario