Screenshot webu

Pro zachycení obrázku webové stránky existuje minimálně 6 následujících možností:

1. Použít standardní klávesu pro zachycení obrazovky PrintScreen (na některých klávesnicích Prt Scr) a výsledek vložit do grafického editoru a uložit. Klávesovou zkratkou Alt + PrintScreen jde zachytit obsah pouze aktuálního okna.

2. Speciální program typu Výstřižky ve Windows, kde jde v obrázku provádět i jednoduché úpravy:

   

   Další šikovný program na tvorbu screenshotů je ShareX.

   

   Celý proces tvorby a sdílení screenshotů dokáže ohromně zrychlit. Po stisknutí některé z klávesových zkratek rovnou nahraje obrázek na vybrané úložiště a zkopíruje do schránky odkaz.

3. Prohlížeč Microsoft Edge dostupný ve Windows 10 má přímo v sobě zabudovanou funkci pro zachycení obrázku stránky s možností zvýrazňování a psaní poznámek:

   

4. Do prohlížečů podporující rozšíření jako je Chrome, Opera nebo Firefox existují doplňky pro zachycení celé stránky včetně obsahu „pod ohybem“, který se zobrazí až po odrolování.

   Existuje jich obrovské množství (stačí zadat screenshot nebo screen capture do hledání rozšíření). Osvědčil se mi nástroj FireShot:

   • FireShot – tvorba screenshotů celé stránky ve Firefoxu, Chrome, IE i Opeře

   

5. Pro automatisované získávání obrázku webu na straně serveru existuje řada služeb nabízející API.

   Obrázek se v takovém případě vygeneruje v prohlížeči někde na cizím serveru.

   • Jak získat náhled webu? – seznam služeb pro tvorbu screenshotů

6. Přibližný obrázek webu jde vytvořit v JavaScriptu na straně klienta pomocí kreslení na plátno <canvas>.

   Skriptem se projde celý DOM stránky, zjistí se styly jednotlivých elementů (metoda getComputedStyle) a podle toho se stránka prvek po prvku nakreslí na plátno.

   • html2canvas – hotové řešení převádějící HTML na obrázek

   Po kliknutí na následující tlačítko se textový obsah tohoto článku nakreslí do <canvas>u a přidá na konec stránky (může to chvíli trvat):

   Vytvořit screenshot