服务器之家

服务器之家 > 正文

Java PhantomJs完成html图片输出功能

时间:2021-03-10 14:29     来源/作者:oschina

借助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输出图片的功能;由于买的是乞丐版,用的前端模板又比较酷炫,所以打开较慢.

操作演示:

Java PhantomJs完成html图片输出功能

v. 项目

项目地址:

quick-media

quickmedia是一个专注图文,音视频,二维码处理等面向多媒体服务的开源项目

以上代码经过我们的测试,大家如果还有不明白可需要讨论的可以在下方留言,感谢你对服务器之家的支持。

原文链接:https://my.oschina.net/u/566591/blog/1584114

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部