Java PhantomJs完成html图片输出功能

借助phantomjs来实现将html网页输出为图片

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 配置添加依赖

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

									    //截屏支持

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

									}