Capturar imagen de una web desde el servidor

Empiezo el blog con un programa para capturar una imagen de una web desde el servidor. Después de investigar algunas opciones que hay para hacerlo desde el navegador (por ejemplo html2canvas) he encontrado una forma mucho más sencilla y que muestra una captura perfecta de cualquier página web, incluyendo animaciones flash.

El programa que nos permite hacer esto se llama PhantomJS y aunque permite hacer muchísimas más cosas (es un navegador webkit completo) aquí voy a contar el proceso de generar una imagen de cualquier página web.

Nos descargamos el programa y subimos a nuestro servidor el ejecutable correspondiente a nuestro sistema operativo. Una vez hecho esto ya podemos crearnos el script que capturará la imagen:

var page   = require('webpage').create();
var system = require('system');
var url    = system.args[1];
var path   = system.args[2];
var width  = system.args[3];
var height = system.args[4];

page.viewportSize = { width: width, height: height };
page.open(url, function () 
{
    setTimeout(function()
    {
        page.render(path);
        phantom.exit();
    }, 1000);
});

Guardamos este script como webSnap.js, por ejemplo. El script recibe cuatro parámetros: la URL de la página a capturar, el path del fichero donde queremos guardar la imagen y el ancho y el alto de la ventana del navegador con el que se simulará estar viendo la página. Con estos datos crea una página, ajusta el tamaño del navegador y la abre, guardando después la captura en el fichero que le hayamos dicho (soporta PNG, GIF, JPG y PDF, dependiendo de la extensión del nombre que le pasemos).

El timeout a la función render() lo he puesto porque en unas pruebas que he estado haciendo con un visor de publicaciones me aparecía la imagen en blanco, lo más seguro es que para una página web normal no haga falta.

Con esto ya lo tenemos todo, solamente nos faltaría invocar al programa pasando los parámetros que queramos:

phantomjs webSnap.js http://www.yahoo.es yahoo.jpg 1024 768

Y tendremos la captura de la página web en su totalidad. Posteriormente si queremos podremos recortarla o hacer cualquier otra cosa con ella.

Esta es la imagen resultante del comando anterior:

yahoo

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.