w3.unpo<code>todo

Trabajar con imágenes

También podemos utilizar imágenes en el canvas. Lo podemos hacer utilizando las reglas del CSS para establecer una imagen como fondo del canvas ( canvas{ background-image:url(img.png);} ) , o lo podemos hacer de manera dinámica utilizando métodos() y propiedades especificas.

Vea la chuleta con las propiedades y metodos() de canvas.

En este segundo supuesto, podemos utilizar:

• - una imagen desde archivo.
• - una imagen ya existente en la página.
• - una imagen dibujada en otro canvas.

También podemos redimensionar, recortar o reposicionar esta imagen. Veamos como y vayamos por partes.

Imagen desde archivo.

Cuando queremos utilizar una imagen desde un archivo, hay que llamar el método drawImage() solo cuando la imagen se haya cargado (img.onload ), ya que las imágenes pueden cargarse lentamente, y probar a utilizar una imagen inexistente, resultaría en error.
Para que esto no pase, tenemos que escribir una función anónima que utiliza drawImage(), y enlazar esta función como retrollamada ( callback ) al evento onload.

A continuación utilizamos em método drawImage(img,x,y) en su forma más sencilla: con solo tres argumentos.

Su navegador no soporta canvas :( 

window.onload = function() {
var canvas = document.getElementById("lienzo");
		if (canvas && canvas.getContext) {
		var ctx = canvas.getContext("2d");
			if (ctx) {
					var img=new Image();
					img.src = "images/enfeinada250.jpg";
					img.onload = function() {
					ctx.drawImage(this, 0, 0);
					}
			 }
		}

}

La imagen ya existente en la página
( reposicionar y redimensionar una imagen )

Si la imagen ya existe en la página, podemos almacenar su valor en una variable ( mediante document.getElementById(), por ejemplo ), y podemos utilizar esta variable con el método drawImage() para dibujar la imagen en el <canvas>.

var img = document.getElementById("img");

Como ya hemos adelantado, también podemos reposicionar y redimensionar la imagen.
En el siguiente ejemplo hemos reducido tanto la anchura como la altura de la imagen a la mitad , y la hemos posicionado en el centro del <canvas>.
Para esto hemos utilizado el método drawImage(img,x,y,w,h) junto con cinco argumentos. El método drawImage dibuja una imagen (img) en el canvas desde el punto (x,y), donde w y h son el ancho y el alto de la imagen, respectivamente.

Su navegador no soporta canvas :( 

window.onload = function() {
	var canvas1 = document.getElementById("lienzo1");
		if (canvas1 && canvas1.getContext) {
		var ctx1 = canvas1.getContext("2d");
			if (ctx1) {
					var img1 = document.getElementById("img");
					var x = ( canvas1.width - (img1.width/2) ) /2;
					var y = ( canvas1.height - (img1.height/2) ) /2;
					var w = img1.width/2;
					var h = img1.height/2;
					ctx1.drawImage( img1, x, y ,w, h );
			 }
		}

}

Su navegador no soporta canvas :(

Imagen desde otro canvas
( recortar reposicionar y redimensionar una imagen )

También podemos utilizar una imagen previamente dibujada en otro <canvas>.

var img3 = canvas2;

En el siguiente ejemplo hemos utilizado la imagen de <canvas id="lienzo2"> que hemos recortado y redimensionado antes de colocarla en el  <canvas id="lienzo3">.

Su navegador no soporta canvas :( 
Su navegador no soporta canvas :( 

window.onload = function() {
 // de este canvas copiamos la imagen
	var canvas2 = document.getElementById("lienzo2");
		if (canvas2 && canvas2.getContext) {
		var ctx2 = canvas2.getContext("2d");
			if (ctx2) {
				var img2 = document.getElementById("img");
				ctx2.drawImage( img2,0,0 );
		}
}
		// a este canvas pegamos la imagen recortada	
		var canvas3 = document.getElementById("lienzo3");
		if (canvas3 && canvas3.getContext) {
		var ctx3 = canvas3.getContext("2d");
			if (ctx3) {
					var img3 = canvas2;
													
					var sx = 50;
					var sy = 40;
					var sw = 140;
					var sh = 140;								
													
					var x = 75;
					var y = 79;
					var w = 100;
					var h = 100;
													
					ctx3.drawImage( img3,sx,sy,sw,sh, x,y,w,h );
				}
		}

}

Vea esta aplicación en codepen: recortar una imagen en canvas HTML5.

See the Pen Crop image by Gabi (@enxaneta) on CodePen.