Jak udělat screenshot webu

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

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

    Výstřižky ve Windows

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

    Screenshoty pomocí 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.

  2. 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:

    Výstřizky v MS Edge

  3. 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

    Screenshoty webu pomocí FireShotu

  4. 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.

  5. 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):

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Analysování a kontrola stránky

Nástroje pro kontrolu a analysování stránky

Užitečné nástroje pro analysování, kontrolování a prověřování webových stránek.

Živé ukázky

Živé ukázky

Proč používám vlastní nástroj na ukázky zdrojových kódů.

Jak přidat komentáře na web

Komentáře na webu

Jak jednoduše provozovat komentáře pod články na svých stránkách.

Úprava CSS/JS na ostrém serveru

Připojení lokálního CSS/JS na ostrý server

Jak na ostrý server připojit pro vývoj a testování lokální styly nebo skripty.

Komentáře