Debo reconocerlo: últimamente me estoy aficionando bastante a cuánta razón. Por la noche me meo de la risa con las ocurrencias de la gente y los pósters que publican. Alguna vez he pensado en colaborar y tal, pero eso de coger un editor de imágenes se me hace pesado. Así que pensé “esto seguro que se puede hacer con HTML5 y el objeto canvas”, con lo que tuve una excusa para aprender lo mínimo y plasmarlo en esta entrada.La verdad es que todo se maneja con javascript, y de HTML hay que escribir lo siguiente:

<!DOCTYPE HTML >
<html>
	<head>
		<title>.::Ejemplo canvas por Alex Such::.</title>
		<script type="text/javascript" src="poster.js"></script>
	</head>
	<body>
		<canvas id="micanvas" width="550" height="550">
			Tu navegador no soporta la etiqueta <pre>canvas</pre>
		</canvas>
	</body>
</html>

Con esto, ya tenemos un canvas creado. Si no se especifican dimensiones, el objeto tiene predeterminados u a altura de xxx y una anchura de yyy píxeles.

¿Qué vamos a hacer con el canvas? Pues lo que necesitamos para nuestro póster que es:

* Rellenar el canvas de negro
* Poner una imagen dentro del canvas
* Rodear esa imagen con un rectángulo azul
* Introducir dos líneas de texto: una azul grande en Times y otra blanca y más pequeña en Arial

Para ello, lo primero que debemos hacer es inicializar el contexto del canvas. Éste nos dará todo lo que necesitamos para manipular el canvas a nuestro antojo.

var canvas = document.getElementById('micanvas')
if(canvas.getContext){
	//Accedemos al contexto de renderizado
	var ctx = canvas.getContext('2d')
	...
}

Ahora, lo rellenaremos completamente de negro. Para ello, indicamos que vamos a pintar un rectángulo de las mismas dimensiones que el canvas, con un color de relleno negro.

//Obtenemos las propiedades de alto y ancho del canvas
var canvasW = $('#micanvas').attr('width')
var canvasH = $('#micanvas').attr('height')

//Definimos un color de relleno, y dibujamos un rectángulo de ese color
ctx.fillStyle = 'rgb(0,0,0)'
ctx.fillRect (0, 0, canvasW, canvasH)

Vamos, que cogemos un color de la caja de rotuladores y con éste pintamos un rectángulo negro.

Posteriormente, añadiremos la imagen. Cuando ésta se cargue, lo que haremos será escalarla al tamaño de nuestro canvas.

var img = new Image();   // Create new img element					
img.src = 'http://www.coders.me/ejemplos/sexy-lightbox/sexyimages/homerin2.jpg'
img.onload = function(){
	var imgH = img.height
	var imgW = img.width
	var width = 0
	var height = 0
	var height_percent = 0.1
	
	if(imgH &gt; imgW){ //Ajustamos al alto
		height = canvasH * 0.65
		width  = imgW * height / imgH
	} else { //Ajustamos al ancho
		width  = canvasW * 0.8
		height = imgH * width / imgW
	}
	
	//Dibujamos la imagen
	ctx.drawImage(img, (canvasW-width)/2, canvasH*height_percent, width, height);
	
	pintarEsquinas();
	
	escribirTexto();
}

Como vemos, si la imagen es más ancha que alta, tendrá un ancho equivalente al 80% del ancho del canvas. Si es más alta que ancha, la altura será del 65% del alto original. Obviamente, la otra dimensión será proporcional. Además hemos indicado que la distancia de la imagen con el borde superior sea del 90%, y que esté centrada con respecto al eje X.

El rectángulo azul no será un rectángulo como tal, sino que serán cuatro líneas azules de un grosor de 5 píxeles, con 3 de separación con la foto. Como sabemos dónde hemos puesto la imagen, nos valdremos de sus coordenadas.

var pintarEsquinas = function(){
	//Dibujamos el rectángulo azul alrededor de la imagen
	ctx.strokeStyle = '#1A76B6' //Color de línea
	ctx.lineWidth = 3 //Grosor del trazo
	ctx.beginPath();
	
	//Primera esquina
	ctx.moveTo(
		((canvasW-width)/2)-5,
		(canvasH*height_percent)-5
	);
	
	//Segunda esquina
	ctx.lineTo(
		((canvasW-width)/2) + width + 5, 
		(canvasH*height_percent)-5
	);
	
	//Tercera esquina
	ctx.lineTo(
		((canvasW-width)/2) + width + 5, 
		(canvasH*height_percent)+height+5
	);
	
	//Última esquina
	ctx.lineTo(
		((canvasW-width)/2)-5, 
		(canvasH*height_percent)+height+5
	);
	
	//Cerramos el rectángulo y pintamos
	ctx.closePath();  
	ctx.stroke();
}

Pasemos ahora al texto

var escribirTexto = function(){
	 //Añadimos texto
	ctx.fillStyle = "#1A76B6";
	ctx.font = "24pt Times New Roman";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText("HOMER SIMPSON", canvasW / 2 , (canvasH*height_percent)+height+30);

	ctx.fillStyle = "#FFFFFF";
	ctx.font = "12pt Arial";
	ctx.fillText("Saliendo de la ducha.", canvasW / 2 , (canvasH*height_percent)+height+60);
}

El código completo del ejemplo está en github. El resultado de lanzarlo será el siguiente:

poster hecho con html5 y el objeto canvas
PD: Después de aprender a hacer los pósters con javascript, descubrí que en cuánta razón te dan las herramientas necesarias para crear el póster desde ahí 🙂

Anuncios