Beim Schreiben von Artikeln müssen Sie häufig Bilder einfügen. Das Einsetzen vorhandener Bilder ist sehr einfach. Manchmal, wenn Sie einige hervorragende Website -Listen erstellen, müssen Sie Webseiten -Screenshots hinzufügen. Dieser Prozess ist sehr langweilig. Sie können in Betracht ziehen, ein Befehlszeilen -Tool zu entwickeln, um eine URL zu übergeben und dann Seiten -Screenshots zu generieren.
Verwenden Sie Node-Webshot für Webseiten-Screenshot
Die verwendeten NPM-Module umfassen Yargs und Node-Webshot. Informationen zu Yargs finden Sie hier, um ein persönliches exklusives Befehlszeilen -Tool von Grund auf zu erstellen - eine vollständige Anleitung zu Yargs.
Node-Webshot ruft Phantomjs auf, um Webseiten-Screenshots zu generieren. Phantomjs ist ein sehr berühmtes NPM -Projekt, das einer Skriptversion des Webkit -Browsers entspricht. Durch Phantomjs können Skripte und Webseiten mit damit interagiert werden, sodass Phantomjs häufig für Webseiten -Automatisierungstests verwendet werden.
Phantomjs lädt den vollständigen Webseiteninhalt wie einen gewöhnlichen Browser und rendert ihn dann im Speicher. Obwohl die Seite, die sie rendert, nicht mit dem bloßen Auge gesehen werden kann, können Sie sie sehen, indem Sie Bilder generieren. Die Node-Webshot verwendet Phantomjs 'Render-Schnittstelle, um Webseiten-Screenshots zu erhalten.
Node-Webshot generiert Beispielcode für Google Homepage:
var webshot = required ('webshot'); webshot ('google.com', 'google.png', function (err) {// screenshot jetzt in google.png} gespeichert); Phantomjs generiert Beispielcode für Google Homepage: var page = required ('webage'). create (); page.open ('http://github.com/', function () {page.render ('github.png'); phantom.exit ();});Warum dann nicht direkt Phantomjs verwenden? Ein Wort ist faul!
Zusätzlich fasst Node-Webshot auch das Lesen und Schreiben von Dateien zusammen. Ich glaube, dass jeder Entwickler, der mit Node.js vertraut ist.
So schreiben Sie Node-Webshot-Streaming-Anrufe:
var webshot = required ('webshot'); var fs = fordert ('fs'); var rendersTream = webshot ('google.com'); var file = fs.createwritestream ('google.png', {codieren: 'binary'}); rendersstream.on ('data', function (data) {file.write (data.toString ('Binary'), 'Binary');});Node-Webshit unterstützt auch die generierende mobile Version von Webseiten-Screenshots:
var webshot = required ('webshot'); var options = {screenSize: {width: 320, Höhe: 480}, ShotSize: {Width: 320, Höhe: 'All'}, UserAgent: 'Mozilla/5.0 (iPhone; u; CPU iPhone os 3_2 Like mac os x; en-us)' + ' +' + ' +' + 'Mobile/531.21.20 (kHtml) (KHTML, Like) (KHTML, Like) (KHTML, Like) (KHTML, LIBE, wie }; webshot ('flickr.com', 'flickr.jpeg', Optionen, Funktion (err) {// Screenshot jetzt in Flickr.jpeg});Schließlich haben wir Yargs und Node-Webshot integriert, aber leider haben wir uns auch bei diesem Teil der Arbeit geholfen und sie einfach direkt installieren.
npm ist nicht -g -webshot -cli
Systemscreenshot mit Desktop-Screenshot
Desktop-Screenshot ist ein plattformübergreifendes System-Screenshot-Projekt. Seine Verwendung ähnelt dem Node-Webshot, außer dass ein URL-Parameter fehlt.
var screenshot = Request ('Desktop-Screenshot'); Screenshot ("screenshot.png", Funktion (Fehler, vollständig) {if (Fehler) console.log ("Screenshot fehlgeschlagen", error); sonst console.log ("Screenshot erfolgreich");});Dies ist ein Screenshot meines Systems
Das Problem ist, dass dieses Fenster auch auf dem Screenshot angezeigt wird, wenn ich die Befehlszeile aufrufe, und es gibt keine gute Möglichkeit, dieses Fenster zu entfernen. Der System -Screenshot ist immer noch ein guter Punkt, der mit Windows geliefert wird.
Bildoptimierung
Schließlich werden zwei Bildoptimierungstools eingeführt
Imagemin
svgo
SVGO wird verwendet, um SVG -Bilder zu optimieren. SVG ersetzt Symbolschrift und wird zu einem neuen Trend.