Funzione di output delle immagini HTML completata da PhantomJs in Java

Utilizzare phantomJs per esportare le pagine web html in immagini

I. Sfondo

Come generare un'immagine in una小程序 e condividerla nei cerchi di amici? Al momento non ci sono soluzioni migliori per la parte front-end, quindi possiamo solo supportarla con il backend, allora come possiamo farlo?

La generazione di immagini è abbastanza semplice

I scenari semplici possono essere supportati direttamente con jdk, in generale non ci sono logiche troppo complesse

Ho scritto una logica di composizione di immagini prima, utilizzando awt: composizione di immagini

Modelli universali e complessi

I modelli semplici possono essere supportati direttamente, ma i modelli più complessi, lasciare che il backend supporti, è ovviamente meno attraente, ho cercato alcuni repository open source per la rendering di html su github, non so se è il mio metodo sbagliato o altro, non ho trovato risultati soddisfacenti

Ora come supportare i modelli complessi?

Questo è la guida di questo articolo, utilizzare phantomjs per la rendering di html, supporta la generazione di pdf, la generazione di immagini, l'analisi del dom è perfetta, quindi dimostriamo come combinare phantomjs per costruire un servizio di rendering di pagine web in immagini

II. Preparazione preliminare

1. Installazione di phantom.js

# 1. Scaricare
## sistema Mac
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
## sistema Linux
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## windows 系统
## 就不要玩了，没啥意思
# 2. 解压
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# 如果解压报错，则安装下面的
# yum -y install bzip2
# 3. 安装
## 简单点，移动到bin目录下
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. 验证是否ok
phantomjs --version
# 输出版本号，则表示ok

2. java依赖配置

maven 配置添加依赖

<!--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>

开动

主要调用phantomjs来实现html渲染图片的逻辑如下

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //设置必要参数
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //ssl证书支持
    dcaps.setCapability("acceptSslCerts", true);
    // supporto della cattura dello schermo
    dcaps.setCapability("takesScreenshot", true);
    // supporto della ricerca CSS
    dcaps.setCapability("cssSelectorsEnabled", true);
    // supporto JavaScript
    dcaps.setJavascriptEnabled(true);
    // supporto del driver (il secondo parametro indica il percorso del tuo motore phantomjs, which/whereis phantomjs può vedere)
    // fixme qui è stato scritto l'esecuzione, potrebbe essere considerato se il sistema ha installato e ottenere il percorso corrispondente o aprire il percorso specificato
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    // crea un'istanza del browser senza interfaccia utente
    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);
  }
}

test 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"));
}

Non allego le immagini generate, ma chi è interessato può testare direttamente sul mio sito web.

III. Misura di rete

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

Dimostrazione operativa:

V. Progetto

Indirizzo del progetto:

quick-media

QuickMedia è un progetto open source che si concentra sulla gestione di immagini, audio, video e QR code per servizi multimediali.

Il codice sopra menzionato è stato testato da noi, se avete domande o bisogno di discutere, potete lasciare un commento qui sotto. Grazie per il supporto al manuale di urlo.