Vytvářejte snímky webových stránek pomocí Node.js a PhantomJS

Automatizace na webu se stala neuvěřitelně dostupnou a pokročilou, zčásti pro nástroje jako PhantomJS. PhatomJS vám umožňuje provádět bezhlavé testování vykreslování WebKit, monitorování sítě, automatizaci stránek a mnoho dalšího. Jedním z jednoduchých úkolů, pro které rád používám PhatomJS, je vytváření snímků obrazovky. Jistě, mohl bych použít jinou službu nebo jiný nástroj, ale PhantomJS je tak flexibilní a snadno použitelný, že není třeba hledat jinde!

Vytvoření snímku obrazovky

Za předpokladu, že jste si stáhli PhatomJS, vytvořte soubor JavaScript (screenshot.js například) s následujícím obsahem:

var page = require('webpage').create();
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog.png');
  phantom.exit();
});

Po vytvoření tohoto skriptu otevřete nástroj příkazového řádku a proveďte následující:

phantomjs screenshot.js

To je vše, co potřebujete k vytvoření snímku obrazovky webu!

Nastavení velikosti výřezu

PhantomJS také usnadňuje nastavení velikosti zobrazované oblasti, stačí změnit jedno nastavení:

var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1080 };
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog1920.png');
  phantom.exit();
});

Úprava velikostí nastavení je příjemná, abyste mohli rychle automatizovat různé velikosti dotazů na média na základě specifikací vašeho webu!

Každých pár týdnů pořídím snímky obrazovky svého webu, abych se ujistil, že jsem neprovedl žádné změny designu, které by porušily některý z mých návrhů. Tuto strategii použiji také pro vytváření screenshotů nápadů na redesign. Líbí se mi, jak snadno se automatizace těchto typů úkolů v dnešní době stala!