Busindre

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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.
<code bash># Si no se especifica la ruta, la salida siempre será en screenshot.png.
firefox -screenshot $HOME/screenshot.png "https://XXX/"</code>

Chrome/Chromium permite hacer screenshots, pero actualmente (2024) necesita de código extra si se quiere tener una captura completa de la página.
<code bash># 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/
</code>


**URL Screenshot en pdf (Chrome / Chromium)**:

Firefox no soporta todavía screenshots en PDFs.

<code bash>chromium --headless --print-to-pdf "https://XXX/"</code>

**Descargar código html de una página (Chrome / Chromium)**:
<code bash>chromium-browser --headless --dump-dom "https://XXX/"</code>
==== 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.
<code>
  -P <profile>       Start with <profile>.
  --profile <path>   Start with profile at <path>.
</code>

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.
<code>user_pref("general.useragent.override", "Mozilla/5.0 AppleWebKit/…")</code>


**Chrome/Chromium**: Para especificar un browser agent, simplemente se usa el parámetro %%--%%user-agent.
<code bash>chromium --headless --user-agent="Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US)..." --print-to-pdf "https://wXXX"</code>


===== Phantomjs (deprecated!) =====

[[http://phantomjs.org/|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).
<code bash>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</code>

Compilar phantomjs.
<code bash>git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 2.0
./build.sh</code>

**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///".
<code javascript 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);
        }
    });
}
</code>

**Crear screenshot de sitio web**.

Obtener una captura de una web a una resolución de 1920xlargo_de_la_web.
<code bash>cd phantomjs/bin/
./phantomjs rasterize.js "http://fuckyeahjessicanigri.tumblr.com/" captura.png 1920px</code>