Java PhantomJs完成html圖片輸出功能

更新時(shí)間：2017年12月22日 14:05:32 投稿：laozhang

給大家?guī)?lái)一篇關(guān)于用Java PhantomJs完成html圖片輸出功能的教學(xué)內(nèi)容，有興趣的朋友學(xué)習(xí)參考下吧。

借助phantomJs來(lái)實(shí)現(xiàn)將html網(wǎng)頁(yè)輸出為圖片

I. 背景

如何在小程序里面生成一張圖，分享到朋友圈呢？目前前端貌似沒(méi)有太好的解決方法，所以只能猥瑣的由后端來(lái)支持掉，那么可以怎么玩？

生成圖片比較簡(jiǎn)單

簡(jiǎn)單的場(chǎng)景，可以直接用jdk來(lái)支持掉，一般來(lái)講也沒(méi)有太復(fù)雜的邏輯

之前寫(xiě)過(guò)一個(gè)圖片合成的邏輯，利用awt實(shí)現(xiàn): 圖片合成

通用、復(fù)雜的模板

簡(jiǎn)單的可以直接支持，但復(fù)雜一點(diǎn)的，讓后端來(lái)支持，無(wú)疑比較惡心，在github上也搜索了一些渲染html的開(kāi)源庫(kù)，不知道是姿勢(shì)不對(duì)還是咋的，沒(méi)有太滿(mǎn)意的結(jié)果

現(xiàn)在對(duì)復(fù)雜的模板，要怎么支持呢？

也就是本篇的指南，利用phantomjs來(lái)實(shí)現(xiàn)html的渲染，支持生成pdf，生成圖片，解析dom都o(jì)k，接下來(lái)則演示下如何結(jié)合 phantomjs 搭建一個(gè)網(wǎng)頁(yè)渲染成圖片的服務(wù)

II. 前提準(zhǔn)備

1. phantom.js 安裝

# 1. 下載
## mac 系統(tǒng)
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
## linux 系統(tǒng)
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
## windows 系統(tǒng)
## 就不要玩了，沒(méi)啥意思
# 2. 解壓
sudo su 
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
# 如果解壓報(bào)錯(cuò)，則安裝下面的
# yum -y install bzip2
# 3. 安裝
## 簡(jiǎn)單點(diǎn)，移動(dòng)到bin目錄下
cp phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin
# 4. 驗(yàn)證是否ok
phantomjs --version
# 輸出版本號(hào)，則表示ok

2. java依賴(lài)配置

maven 配置添加依賴(lài)

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

開(kāi)動(dòng)

主要調(diào)用phantomjs來(lái)實(shí)現(xiàn)html渲染圖片的邏輯如下

public class Html2ImageByJsWrapper {
  private static PhantomJSDriver webDriver = getPhantomJs();
  private static PhantomJSDriver getPhantomJs() {
    //設(shè)置必要參數(shù)
    DesiredCapabilities dcaps = new DesiredCapabilities();
    //ssl證書(shū)支持
    dcaps.setCapability("acceptSslCerts", true);
    //截屏支持
    dcaps.setCapability("takesScreenshot", true);
    //css搜索支持
    dcaps.setCapability("cssSelectorsEnabled", true);
    //js支持
    dcaps.setJavascriptEnabled(true);
    //驅(qū)動(dòng)支持（第二參數(shù)表明的是你的phantomjs引擎所在的路徑，which/whereis phantomjs可以查看）
    // fixme 這里寫(xiě)了執(zhí)行， 可以考慮判斷系統(tǒng)是否有安裝，并獲取對(duì)應(yīng)的路徑 or 開(kāi)放出來(lái)指定路徑
    dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs");
    //創(chuàng)建無(wú)界面瀏覽器對(duì)象
    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);
  }
}

測(cè)試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"));
}

生成的圖片就不貼了，有興趣的可以直接到我的網(wǎng)站上實(shí)測(cè)

III. 網(wǎng)絡(luò)實(shí)測(cè)

在阿里云服務(wù)器上部署了一個(gè)簡(jiǎn)單的web應(yīng)用，支持了html輸出圖片的功能；由于買(mǎi)的是乞丐版，用的前端模板又比較酷炫，所以打開(kāi)較慢.

操作演示: