User Tools

Site Tools


screenshot_de_paginas_webs_desde_terminal

Hacer screenshots (imagen / PDF) de páginas web desde linea de comandos

Firefox y Chromium/Chrome permiten hacer screenshot de páginas web. Cada uno de ellos destaca y soporta diferentes formatos por lo que actualmente, dependiendo de las necesidades, será mejor usar uno u otro

Usando Firefox y Chrome/Chromium

URL Screenshot en imagen: Firefox no necesita de parámetros ni código extra para tomar una screenshot completa de una web, independientemente de la estructura de la página.

# Si no se especifica la ruta, la salida siempre será en screenshot.png.
firefox -screenshot $HOME/screenshot.png "https://XXX/"

Chrome/Chromium permite hacer screenshots, pero actualmente (2024) necesita de código extra si se quiere tener una captura completa de la página.

# https://developer.chrome.com/blog/headless-chrome?hl=es-419
# Screenshot completas de URLs: https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a
chrome --headless --disable-gpu --screenshot https://XXX/
chromium --headless --disable-gpu --screenshot https://XXX/

URL Screenshot en pdf (Chrome / Chromium):

Firefox no soporta todavía screenshots en PDFs.

chromium --headless --print-to-pdf "https://XXX/"

Descargar código html de una página (Chrome / Chromium):

chromium-browser --headless --dump-dom "https://XXX/"

Especificando un browser agent en la linea de comandos de Firefox / Chrome

Firefox: No está soportado, se debe especificar en el perfil de usuario y luego usar dicho perfil en la ejecución de linea de comandos.

  -P <profile>       Start with <profile>.
  --profile <path>   Start with profile at <path>.

Para configurar un perfil de firefox, este puede ejecutarse gráficamente y configurarlo como se quiera (about:config). Pero si solo se quiere cambiar el browser agent, se puede editar el fichero “user.js” del directorio de perfil ($HOME/.mozilla/firefox/XXXX.default) y modificar la siguiente linea.

user_pref("general.useragent.override", "Mozilla/5.0 AppleWebKit/…")

Chrome/Chromium: Para especificar un browser agent, simplemente se usa el parámetro --user-agent.

chromium --headless --user-agent="Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US)..." --print-to-pdf "https://wXXX"

Phantomjs (deprecated!)

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. Actualmente el proyecto está discontinuado ya que los navegadores actuales tienen dichas opciones ya implementadas y pueden ejecutadas desde linea de comandos.

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
screenshot_de_paginas_webs_desde_terminal.txt · Last modified: 2024/03/20 23:32 by busindre