Monat: Oktober 2017

Screenshots von Webseiten als Bild oder PDF abspeichern

Mit der Veröffentlichung von Chrome-/Chromium-Headless ist es recht einfach, Screenshots zu erstellen.

Früher musste man zb auf PhantomJS zurückgreifen, doch PhantomJS war nicht ganz so zuverlässig.

Wie also Screenshots erstellen?

Screenshots mit Puppeteer (node.js) und Headless-Chrome

Puppeteer kommt vom Chrome-Team und ist eine Node.js Bibliothek.

Puppeteer bietet eine API um einfach mit Chrome-Headless zu sprechen.

Was kann Puppeteer?

  • PDFs und Bilder von Webseiten screenshotten
  • Webscraping, Contentscraping
  • Formulare abschicken
  • Tastatureingaben
  • UI-Testing

Beispiele für die Verwendung findet man auf der GitHub Seite.

Folgendes Tutorial bietet auch einen Startpunkt:

https://tutorialzine.com/2017/08/automating-google-chrome-with-node-js

Screenshots mit Chrome-Headless und Linux-Terminal

Mit einem Terminal lassen sich leicht Screenshots als PDF oder Bild speichern:

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Ein guter Artikel und Anleitung dazu findet sich hier:

Echter Headless Chrome (oder Chromium) – Bedien deinen Browser per Kommandozeile, Selenium oder node.js!

Was ist Chrome-Headless?

  • Mit Chrome-Headless kann man den Browser per Kommandozeile/Terminal, Selenium, node.js oder C++ verwenden.
  • Chrome kann daher ressourcenschonend ohne grafische Ausgabe am Server laufen.
  • Man kann per Code Screenshots oder PDFs erstellen, Webseiten debuggen, Formulare ausfüllen und versenden und eben alles machen, was man auch mit der Maus, Tastatur oder per Touch machen kann!

 Gibt es auch Chromium Headless?

Natürlich lässt sich Chromium auch headless starten, und das geht zb im Linux-Terminal so:

$ chromium-browser --headless

Verwendung

Speichern als PDF

$ chromium-browser --headless --disable-gpu --print-to-pdf https://www.kaoh.at

Dieser Befehl erzeugt ein PDF von der angegebenen Seite. Das Ergebnis schaut dann zb so aus:


Es wird also ein PDF mit mehreren Seiten generiert.

Screenshots

chrome --headless --disable-gpu --screenshot https://www.kaoh.at

# Screenshot in Nexus 5x Auflösung
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.kaoh.at

Der normale Screenshot liefert folgendes Bild:

Der Screenshot mit der Nexus 5x Auflösung schaut so aus:

Hilfestellungen

Brauche ich die –disable-gpu Flag?

Ja, weil dadurch ein paar Bugs umgangen werden

Wo liegt der Unterschied zu PhantomJS?

PhantomJS verwendet eine ältere Renderengine (eine ältere WebKit-Version).

Viel wichtiger: PhantomJS ist unzuverlässiger, liefert nicht so gute und nachvollziehbare Ergebnisse und macht Probleme mit manchen JavaScript-Dingen.

 

Interessante Links

nginx Problem 502 Bad Gateway beim Hosting mit Plesk – Hier die Lösung!

Wer schon mal mit Plesk zu tun hatte, kennt das Problem:

 

  • Die Seite ist erreichbar
  • Das SSL-Zertifikat wird ausgeliefert
  • Die Domain wird aufgelöst
  • Es kommt aber keine Homepage sondern der Fehler:
    • 502 Bad Gateway

[error] 10485#0: *1947668 connect() failed (111: Connection refused) while connecting to upstream, client:

GRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR!!!!

nginx macht also Probleme! Und man kommt nicht und nicht drauf warum…

Lösung

Lösung 1: nginx deaktivieren ( don’t! )

nginx deaktivieren! Hahahah. Ja, das behebt das Problem. Dann hat man aber keinen reverse proxy mehr am Laufen.

 

Echte Lösung: IP neu lesen

Im Plesk-Panel in den Menüpunkt Tools & Einstellungen -> IP-Adressen gehen und auf den Button IP neu einlesen drücken:

Gehe zum Menüpunkt Tools & Einstellungen -> IP-Adressen
Drücke auf IP neu einlesen

Plesk sagt dazu im Original:

Grund für das Problem

Höchstwahrscheinlich fail2ban.

Das Problem tritt mit der Zeit auf, wenn man neue Domains anlegt oder an der IP herumfummelt.

Plesk selbst sagt dazu:

Fail2Ban blocks server's IP addresses.

Das ist ein bisserl strange, dass Fail2Ban die eigenen IP-Adresse blockiert, ist nunmal aber so. Deal with it! 😀

Links

 

Whatsapp mit Link vom Browser öffnen – Link zum eigenen Whatsapp Profil, zur eigenen Whatsapp Nummer

Einen Link zur eigenen Telefonnummer einzugeben ist recht einfach:

<a href="tel:+43147">Ruf mich auf der Telefonnummer 147 an!</a>

Der wichtige Teil ist das href=“tel…

href="tel:+43147"&gt;

Wie bekomme ich nun einen Link zur WhatsApp-Nummer?

whatsapp photo
Photo by clasesdeperiodismo

Für Desktop-Browser

Einfach einen Link zu Whatsapp-Web angeben, und schon öffnet sich Whatsapp!

Also so:

href="https://web.whatsapp.com/send?l=en&amp;phone=43147"

Der wichtigste Teil ist, die eigene Telefonnummer hinter phone= anzupassen:

...phone=43147"

Für Smartphones (Android, iOS)

href="https://api.whatsapp.com/send?l=en&amp;phone=43147"

So wär der Link also: https://api.whatsapp.com/send?l=en&phone=43147

Tricky Part

Mit Browser Sniffing muss nun der Link ausgetauscht werden. Am Handy funktioniert der Link zu WhatsApp Web nämlich nicht!

 

Die WhatsApp-Doku sagt dazu:

Links: