Como crear thumbnail o miniatura de página web

Hola a todos, hoy traigo un sencillo tutorial donde aprenderemos a crear thumbnail o miniatura de una página web. En este tutorial no emplearemos ningún servicio externo que nos facilite una API para crear las miniaturas de webs, ya que suelen ser de pago.

Para ser sincero, este artículo se iba a titular de otra forma, más concretamente su título iba a ser “¿Qué es PhantomJS y para qué sirve?”. Había escogido ese título porque quería hablar de PhantomJS a aquellos que lo desconocen, pero tras escribir el artículo decidí que sería mejor ponerle un título de algo más práctico y útil, como puede ser la creación de miniaturas de páginas web gratis y que al mismo tiempo sirviese de presentación para PhantomJS.

¿Qué es PhantomJS y para qué sirve?

Antes de nada debo hacer una explicación muy por encima de qué es PhantomJS y para qué podemos usarlo. La definición literal de la documentación sería: “PhantomJS es un WebKit (sin interfaz gráfica) con el que podemos hacer scripting en Javascript”.

Lo anterior a muchos nos dirá poco o nada, así que para entenderlo mejor lo explicare con mis palabras: PhantomJS es un navegador basado en WebKit que carece de interfaz gráfica, pero podemos ejecutarlo a través de la línea de comandos y al mismo tiempo nos facilita una API Javascript para interactuar con las páginas web.

El próximo paso es instalar PhantomJS en nuestro PC, para ello nos vamos a la página oficial http://phantomjs.org/ y descargamos la última versión (en este momento estoy usando la versión 2.1.1 para Windows). En el caso de la versión para Windows nos descargaremos un archivo zip que descomprimiremos y dentro de la carpeta bin encontraremos el ejecutable phantomjs.exe que será el que ejecutaremos a través de la línea de comandos.

Ya tenemos PhantomJS instalado!, ahora sólo necesitaremos un editor de texto (suelo usar Sublime Text) para escribir nuestro código en Javascript.

Creando nuestro primer script para PhantomJS.

Vamos a comenzar por crear un pequeño script que nos servirá de código base para crear los thumbnails de las webs. El contenido de nuestro archivo test.js es:

var page = require('webpage').create();
page.open('https://www.vozidea.com/', function() {
  page.render('vozidea.png');
  phantom.exit();
});

El código lo copiamos y lo guardamos en nuestro archivo test.js que estará en la misma carpeta que el ejecutable phantomjs.exe. Nos vamos a la consola de Windows y ejecutamos el siguiente comando: phantomjs.exe test.js

Tras ejecutarlo vemos que se ha creado el archivo vozidea.png que es la miniatura de Vozidea.com.

Como crear thumbnail o miniatura de página web.

En este apartado vamos a pulir el código anterior para adaptarlo a nuestras necesidades. Si habéis visto la imagen que se creó en el apartado anterior, PhantomJS tomó la captura para un ancho de 400 pixels, ya que es el ancho mínimo del viewport del diseño responsivo de Vozidea.com.

En este apartado definiremos un tamaño personalizado de viewport, para así ajustar el tamaño de la miniatura a nuestras necesidades. Otra mejora que incluiremos en el script será agregar mensajes que nos informen de cuando se ha terminado el trabajo de creación del thumbnail o si ha fallado el proceso. El código final quedaría asi:

var page = require('webpage').create();
page.viewportSize = { width: 1400, height: 1000}; //Definimos las dimensiones (alto y ancho) del viewport
page.open('http://www.vozidea.com', function(status) {
  if(status === "success") {
    page.render('example.png');
    console.log("Thumbnail creado!");
  }
  else {
    console.log("Error: no se pudo cargar la página!");
  }
  phantom.exit();
});

Conclusiones.

Con PhantomJS podemos realizar gran cantidad de tareas, no sólo crear thumbnails o miniaturas de páginas web. Al tratarse de un navegador (aunque no tenga interfaz gráfica) nos ofrece una gran flexibilidad sobre todo a la hora de realizar tests automáticos en webs. No podía despedirme sin mencionar antes CasperJS, un complemento para PhantomJS que nos facilita la tarea de automatizar tareas.

Esto es todo por hoy, las posibles dudas podéis dejarlas en los comentarios.