Busindre

PhantomJS es un navegador web sin interfaz gráfica utilizado para automatizar la interacción con páginas web, sobre todo en entornos de integración continua que requieren de pruebas constantes. PhantomJS ofrece una API en JavaScript que permite la navegación automatizada, realizar capturas de pantalla, simular comportamientos de usuario, etc. PhantomJS está basado en Webkit, entorno de navegación similar a Safari. Es código abierto publicado bajo la licencia BSD.

Phantomjs es por tanto una buena herramienta para obtener capturas de pantalla fácilmente sin necesidad de entorno gráfico, muy útil para integrarlo en programas / scripts.

Compilar / Instalar phantomjs.

Descargar: http://phantomjs.org/download.html

Dependencias (Debian / Ubuntu).

apt-get install build-essential g++ flex bison gperf ruby perl \
  libsqlite3-dev libfontconfig1-dev libicu-dev libfreetype6 libssl-dev \
  libpng-dev libjpeg-dev python libX11-dev libxext-dev ttf-mscorefonts-installer git

Compilar phantomjs.

git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 2.0
./build.sh

rasterize.js

Código original: https://code.google.com/p/phantomjs/source/browse/examples/rasterize.js

Crear el fichero js rasterize.js en el directorio “phantomjs/bin/”.

rasterize.js

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;
 
 
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';
 
if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

Crear screenshot de sitio web.

Obtener una captura de una web a una resolución de 1920xlargo_de_la_web.

cd phantomjs/bin/
./phantomjs rasterize.js "http://fuckyeahjessicanigri.tumblr.com/" captura.png 1920px