Hallo allerseits, heute bringe ich ein einfaches Tutorial mit, in dem wir lernen werden, wie man Thumbnails oder Thumbnails von Webseiten erstellt . In diesem Tutorial verwenden wir keinen externen Dienst , der uns eine API zum Erstellen der Web-Thumbnails zur Verfügung stellt, da diese normalerweise bezahlt werden.
Um ehrlich zu sein, sollte dieser Artikel anders betitelt werden, genauer gesagt lautete sein Titel “Was ist PhantomJS und wofür ist es?” Ich hatte diesen Titel gewählt, weil ich mit Unbekannten über PhantomJS sprechen wollte, aber nachdem ich den Artikel geschrieben hatte, entschied ich, dass es besser ist, einen Titel zu schreiben, der praktischer und nützlicher ist, wie die Erstellung von kostenlosen Miniaturansichten von Webseiten und zur gleichen Zeit dienen als Präsentation für PhantomJS.
Was ist PhantomJS und wofür ist es?
Zuallererst muss ich eine Erklärung abgeben, die weit darüber hinausgeht, was PhantomJS ist und wofür wir es verwenden können. Die wörtliche Definition der Dokumentation wäre: “PhantomJS ist ein WebKit (ohne grafische Oberfläche), mit dem wir Skripte in Javascript erstellen können” .
Das Vorherige für viele wird uns nur wenig oder gar nichts sagen. Um es besser zu verstehen, erkläre ich es mit meinen Worten: PhantomJS ist ein WebKit- basierter Browser , dem eine grafische Oberfläche fehlt , der jedoch über die Befehlszeile ausgeführt werden kann und der uns gleichzeitig die Arbeit erleichtert eine Javascript-API zur Interaktion mit Webseiten.
Der nächste Schritt ist die Installation von PhantomJS auf unserem PC . Dazu gehen wir auf die offizielle Seite http://phantomjs.org/ und laden die neueste Version herunter (im Moment verwende ich Version 2.1.1 für Windows) . Bei der Windows-Version laden wir eine zip Datei herunter, die wir entpacken und im Ordner bin finden wir die ausführbare Datei phantomjs.exe , die wir über die Befehlszeile ausführen.
Wir haben bereits PhantomJS installiert! , jetzt brauchen wir nur noch einen Texteditor (normalerweise benutze ich Sublime Text ) um unseren Code in Javascript zu schreiben.
Erstellen unseres ersten Skripts für PhantomJS.
Wir beginnen mit der Erstellung eines kleinen Skripts, das als Basiscode zum Erstellen von Miniaturansichten der Websites dient. Der Inhalt unserer test.js Datei ist:
var page = require('webpage').create(); page.open('https://www.vozidea.com/', function() { page.render('TechnoWikis.png'); phantom.exit(); });
Wir kopieren den Code und speichern ihn in unserer Datei test.js , die sich im selben Ordner befindet wie die phantomjs.exe Datei phantomjs.exe . Wir gehen zur Windows-Konsole und führen den folgenden Befehl aus: phantomjs.exe test.js
Nach der Ausführung sehen wir, dass die Datei TechnoWikis.png erstellt wurde. Dies ist die Miniaturansicht von Vozidea.com.
So erstellen Sie ein Miniaturbild oder ein Miniaturbild der Webseite.
In diesem Abschnitt werden wir den vorherigen Code polieren, um ihn an unsere Bedürfnisse anzupassen. Wenn Sie das im vorherigen Abschnitt erstellte Bild gesehen haben, hat PhantomJS das Capture für eine Breite von 400 Pixeln verwendet, da dies die minimale Darstellungsbreite des responsiven Designs von Vozidea.com ist.
In diesem Abschnitt definieren wir eine benutzerdefinierte Größe des Ansichtsfensters, um die Größe der Miniaturansicht an unsere Bedürfnisse anzupassen. Eine weitere Verbesserung, die wir in das Skript aufnehmen werden, besteht darin, Meldungen hinzuzufügen, die uns darüber informieren, wann die Erstellung der Miniaturansichten abgeschlossen ist oder ob der Vorgang fehlgeschlagen ist. Der endgültige Code würde folgendermaßen aussehen:
var page = require('webpage').create(); page.viewportSize = { width: 1400, height: 1000}; //Definimos las dimensiones (alto y ancho) del viewport page.open('http://www.vozidea.com', function(status) { if(status === "success") { page.render('example.png'); console.log("Thumbnail creado!"); } else { console.log("Error: no se pudo cargar la página!"); } phantom.exit(); });
Schlussfolgerungen
Mit PhantomJS können wir viele Aufgaben erledigen, nicht nur Thumbnails oder Webseiten-Thumbnails erstellen. Da es sich um einen Browser handelt (obwohl er keine grafische Oberfläche hat), bietet er uns große Flexibilität, insbesondere bei der Durchführung automatischer Webtests. Ich könnte mich nicht verabschieden, ohne CasperJS zu erwähnen, eine Ergänzung zu PhantomJS, die die Aufgabe der Automatisierung von Aufgaben erleichtert.
Dies ist alles für heute, Sie können irgendwelche Zweifel in den Kommentaren hinterlassen.