Verwenden Sie Phantomjs, um HTML -Webseiten als Bilder auszugeben
I. Hintergrund
Wie generiere ich ein Bild im Mini -Programm und teile es mit deinem Freundeskreis? Derzeit scheint es keine gute Lösung für das Front-End zu geben, sodass sie nur vom Back-End unterstützt werden kann. Wie kann es also gespielt werden?
Bilder zu erzeugen ist einfacher
In einfachen Szenarien können Sie JDK direkt verwenden, um sie zu unterstützen, und es gibt im Allgemeinen keine zu komplizierte Logik.
Ich habe zuvor eine Logik für die Bildsynthese geschrieben und AWT zum Implementieren: Bildsynthese verwendet
Allgemeine, komplexe Vorlagen
Einfache können direkt unterstützt werden, aber komplizierter, und es ist zweifellos ekelhaft, das Backend es unterstützen zu lassen. Ich habe auch nach einigen Open -Source -Bibliotheken gesucht, um HTML auf GitHub zu rendern. Ich weiß nicht, ob es sich um die falsche Haltung oder so handelt, aber ich hatte kein sehr zufriedenstellendes Ergebnis.
Wie unterstütze ich jetzt komplexe Vorlagen?
Das heißt, der Leitfaden dieses Artikels, bei dem Phantomjs verwendet werden, um HTML -Rendering zu realisieren, die Erzeugung von PDFs zu unterstützen, Bilder zu generieren und DOMs zu analysieren, sind in Ordnung. Als nächstes werden wir demonstrieren, wie Phantomjs kombiniert werden, um eine Webseite zu erstellen, um sie zu Bildern zu machen.
Ii. Voraussetzung für Vorbereitung
1. Phantom.js Installation
# 1. Download ## Mac System WGet https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip## Linux System WGE https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2## Windows-System ## nicht mehr spielen Fehler auftreten. Installieren Sie die folgenden #YUM -y -y-Installation BZIP2# 3. Installieren Sie ##, um einfach zu sein, und wechseln Sie zum Bin-Verzeichnis phantomjs-2.1.1-linux-x86_64/bin/phantomjs/usr/lokal/bin# 4.
2. Konfiguration Java -Abhängigkeit
Maven -Konfiguration fügen Abhängigkeiten hinzu
<!--phantomjs --><dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>2.53.1</version></dependency><dependency> <groupId>com.github.detro</groupId> <artifactId>ghostdriver</artifactId> <version> 2.1.0 </Version> </abhängig> <Repositories> <Prepository> <id> jitpack.io </id> <Url> https://jitpack.io </url> </repository> </repositories>
Start
Die Logik, hauptsächlich Phantomjs aufzurufen, um das HTML -Rendering -Bild zu implementieren, lautet wie folgt
public class html2imageByjswrapper {private statische Phantomjsdriver WebDriver = getPhantomjs (); private statische Phantomjsdriver getPhantomjs () {// notwendige Parameter WANTED CAPALITYS DCAPS = NEW WANTEDCAPAMITILIONS (); // SSSL -Zertifikat unterstützt dcaps.setCapability ("AcceptsSlCerts", true); // Screenshot unterstützt dcaps.setCapability ("takesscreenshot", true); // CSS -Suche unterstützt dcaps.setCapability ("csSelectorSabled", true); // js unterstützt dcaps.setjavascriptenabled (true); // Treiberunterstützung (der zweite Parameter zeigt den Pfad an, auf dem sich Ihre Phantomjs -Engine befindet. Dies/wobei Phantomjs angezeigt werden können) // Fixme schreibt hier die Ausführung, Sie können in Betracht ziehen, ob das System installiert ist, und den entsprechenden Pfad oder den angegebenen Pfad dcaps.setcapabilität (Phantomjsdrivers.Phantomjs_execable_Property_PropertyMecable_Proptyph_Property_ProptyMecable_Plivers. "/usr/local/bin/phantomjs"); // Erstellen Sie ein interfaceless Browser -Objekt zurück, der neue Phantomjsdriver (DCAPs) zurückgibt. } public static bufferedImage renderhtml2Image (String url) löscht ioException {webdriver.get (URL); Datei file = webriver.getScreenshotas (outputType.file); return imageio.read (Datei); }}Testfall
public class base64util {public static String codes (bufferedImage bufferedImage, String imgType) löst IOException {bytearrayoutputStream outputStream = new bytearrayoutputStream () aus; Imageio.Write (BufferedImage, IMGTYPE, OutputStream); return codes (outputStream); } public static String Encodes (byteArrayoutputStream outputStream) {return base64.getEnCoder (). codetoString (outputStream.tobytearray ()); }}@Testpublic void testrender () löst ioException {bufferedImage img = null aus; für (int i = 0; i <20; ++ i) {String url = "https://my.oschina.net/u/566591/blog/1580020"; Long start = system.currentTimemillis (); img = html2imageByjswrapper.renderhtml2Image (URL); Long End = System.currentTimemillis (); System.out.println ("Kosten:" + (Ende - Start)); } System.out.println (Base64util.encode (IMG, "PNG"));};Ich werde die generierten Bilder nicht veröffentlichen. Wenn Sie interessiert sind, können Sie direkt zu meiner Website gehen, um sie zu testen.
III. Netzwerktest
Auf Alibaba Cloud Server wurde eine einfache Webanwendung bereitgestellt, wobei die Funktion von HTML -Ausgabebildern unterstützt wurde. Da ich die Bettlerversion gekauft habe und die Front-End-Vorlage, die ich verwendete, kühler war, öffnete sie langsam.
Operation Demo:
V. Projekt
Projektadresse:
Schnellmedien
QuickMedia ist ein Open -Source -Projekt, das sich auf Grafik-, Text-, Audio- und Video-, QR -Code -Verarbeitung und andere Multimedia -Dienste konzentriert.
Der obige Code wurde von uns getestet. Wenn Sie immer noch nicht verstehen, was Sie besprechen müssen, können Sie unten eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung für Wulin.com.