借助phantomjs来实现将html网页输出为图片
i. 背景
如何在小程序里面生成一张图，分享到朋友圈呢？目前前端貌似没有太好的解决方法，所以只能猥琐的由后端来支持掉，那么可以怎么玩？
生成图片比较简单
简单的场景，可以直接用jdk来支持掉，一般来讲也没有太复杂的逻辑
之前写过一个图片合成的逻辑，利用awt实现: 图片合成
通用、复杂的模板
简单的可以直接支持，但复杂一点的，让后端来支持，无疑比较恶心，在github上也搜索了一些渲染html的开源库，不知道是姿势不对还是咋的，没有太满意的结果
现在对复杂的模板，要怎么支持呢？
也就是本篇的指南，利用phantomjs来实现html的渲染，支持生成pdf，生成图片，解析dom都ok，接下来则演示下如何结合 phantomjs 搭建一个网页渲染成图片的服务
ii. 前提准备
1. phantom.js 安装
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
# 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 配置添加依赖
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!--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渲染图片的逻辑如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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输出图片的功能；由于买的是乞丐版，用的前端模板又比较酷炫，所以打开较慢.
操作演示:
v. 项目
项目地址：
quick-media
quickmedia是一个专注图文，音视频，二维码处理等面向多媒体服务的开源项目
以上代码经过我们的测试，大家如果还有不明白可需要讨论的可以在下方留言，感谢你对服务器之家的支持。
原文链接：https://my.oschina.net/u/566591/blog/1584114