如何使用Java中的PhantomJS實作HTML頁面截圖功能？-java教程-PHP中文網

I. 背景

如何在小程式裡面產生一張圖，分享到朋友圈呢？目前前端似乎沒有太好的解決方法，所以只能猥瑣的由後端來支持掉，那麼可以怎麼玩？

生成圖片比較簡單

簡單的場景，可以直接用jdk來支持掉，一般來講也沒有太複雜的邏輯

之前寫過一個圖片合成的邏輯，利用awt實現: 圖片合成

通用、複雜的模板

簡單的可以直接支持，但複雜一點的，讓後端來支持，無疑比較噁心，在github上也搜尋了一些渲染html的開源庫，不知道是姿勢不對還是咋的，沒有太滿意的結果

現在對複雜的模板，要怎麼支持呢？

也就是本篇的指南，利用phantomjs來實現html的渲染，支援生成pdf，產生圖片，解析dom都ok，接下來則示範下如何結合phantomjs 搭建一個網頁渲染成圖片的服務

II. 前提準備

1. phantom.js 安裝

# 1. 下载 ## mac 系统 wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip ## 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 設定新增依賴

  org.seleniumhq.selenium selenium-java 2.53.1   com.github.detro ghostdriver 2.1.0    jitpack.io https://jitpack.io

登入後複製

開動

主要呼叫phantomjs來實作html渲染圖片的邏輯如下

public class Html2ImageByJsWrapper { private static PhantomJSDriver webDriver = getPhantomJs(); private static PhantomJSDriver getPhantomJs() { //设置必要参数 DesiredCapabilities dcaps = new DesiredCapabilities(); //ssl证书支持 dcaps.setCapability("acceptSslCerts", true); //截屏支持 dcaps.setCapability("takesScreenshot", true); //css搜索支持 dcaps.setCapability("cssSelectorsEnabled", true); //js支持 dcaps.setJavascriptEnabled(true); //驱动支持（第二参数表明的是你的phantomjs引擎所在的路径，which/whereis phantomjs可以查看） // fixme 这里写了执行， 可以考虑判断系统是否有安装，并获取对应的路径 or 开放出来指定路径 dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY, "/usr/local/bin/phantomjs"); //创建无界面浏览器对象 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 III. 網路實測 
操作示範: