Java PhantomJs zum Ausgeben von HTML-Bildern

Die Ausgabe von HTML-Webseiten als Bilder wird durch PhantomJs ermöglicht

I. Hintergrund

Wie kann man ein Bild in einer Mini-App erzeugen und es in den Freundeskreis teilen? Derzeit gibt es anscheinend keine guten Lösungen für das Frontend, daher muss es schmutzig von der Backend unterstützt werden. Wie kann man das spielen?

Die Erstellung von Bildern ist relativ einfach

Einfache Szenarien können direkt mit JDK unterstützt werden, im Allgemeinen gibt es auch keine zu komplexen Logiken.

Ich habe zuvor eine Logik für die Bildkombination geschrieben, die mit AWT realisiert wird: Bildkombination

Allgemein und komplexe Templates

Einfache Templates können direkt unterstützt werden, aber bei komplexeren Templates ist es sicherer, den Backend zu unterstützen, was sicherlich unangenehm ist. Auf GitHub wurde nach Open-Source-Bibliotheken zur HTML-Rendering gesucht, aber es wurden keine zufriedenstellenden Ergebnisse gefunden, ob das an der Methode liegt oder was auch immer.

Wie kann man jetzt komplexe Templates unterstützen?

Das ist auch das Handbuch dieses Artikels, das die Rendering von HTML mit PhantomJS ermöglicht, Unterstützung bei der Erstellung von PDFs, Bildern und der DOM-Analysis bietet. Nachfolgend wird gezeigt, wie man eine Dienstleistung zur Bildrenderung von Webseiten mit PhantomJS aufbaut.

II. Voraussetzungen

1. Installation von phantom.js

# 1. Herunterladen
## Mac-System
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
## Linux-System
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## Windows-System
## Lassen Sie es sein, weiter zu spielen, das hat keinen Sinn
# 2. Entpacken
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# Wenn beim Entpacken Fehler auftreten, installieren Sie die folgenden
# yum -y install bzip2
# 3. Installation
## Einfach gesagt, bewegen Sie sich in das Verzeichnis bin
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. Überprüfen Sie, ob ok ist
phantomjs --version
# Wenn die Version ausgegeben wird, bedeutet dies ok

2. java-Abhängigkeitskonfiguration

maven-Konfiguration hinzufügen, um Abhängigkeiten hinzuzufügen

!--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>
</dependency>
<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

Los geht's

Der Hauptaufruf von phantomjs zur Implementierung der Logik zur Bildwiedergabe von html wie folgt

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //Erforderliche Parameter setzen
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //ssl-Zertifikatsunterstützung
    dcaps.setCapability("acceptSslCerts", true);
    //Bildschirmaufnahmeunterstützung
    dcaps.setCapability("takesScreenshot", true);
    //CSS-Sucheunterstützung
    dcaps.setCapability("cssSelectorsEnabled", true);
    //JS-Unterstützung
    dcaps.setJavascriptEnabled(true);
    //Treiberunterstützung (der zweite Parameter zeigt den Pfad Ihres PhantomJS-Engines an, which/whereis phantomjs kann angezeigt werden）
    // fixme Hier wurde die Ausführung geschrieben, es kann in Betracht gezogen werden, ob das System installiert ist, und den entsprechenden Pfad zu erhalten oder öffnen Sie den Pfad, um zu spezifizieren
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    //Erstellen Sie ein Objekt für den Headless-Browser
    return new PhantomJSDriver(dcaps);
  }
  public static BufferedImage renderHtml2Image(String url) throws IOException {
    webDriver.get(url);
    File file = webDriver.getScreenshotAs(OutputType.FILE);
    return ImageIO.read(file);
  }
}

测试case

public class Base64Util {
  public static String encode(BufferedImage bufferedImage, String imgType) throws IOException {
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
    ImageIO.write(bufferedImage, imgType, outputStream);
    return encode(outputStream);
  }
  public static String encode(ByteArrayOutputStream outputStream) {
    return Base64.getEncoder().encodeToString(outputStream.toByteArray());
  }
}
@Test
public void testRender() throws IOException {
  BufferedImage img = null;
  for (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("cost: " + (end - start));
  }
  System.out.println(Base64Util.encode(img, "png");
}

生成的图片就不贴了，有兴趣的可以直接到我的网站上实测

III. 网络实测

在阿里云服务器上部署了一个简单的web应用，支持了html输出图片的功能；由于买的是乞丐版，用的前端模板又比较酷炫，所以打开较慢。

操作演示：

V. 项目

项目地址：

quick-media

QuickMedia是一个专注于图文，音视频，二维码处理等多媒体服务的开源项目

以上代码经过我们的测试，大家如果还有不明白需要讨论的可以在下方留言，感谢你对呐喊教程的支持。