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

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

III. 网络实测

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

友情链接 : https://zbang.online/web/html/toimg

操作演示:

IV. 项目

项目地址：

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

扫描关注，提供更多有趣的编码知识