网页截图和svg模版动态生成图片Java实现

使用场景

需要Java语言动态生成图片

用流程图简单说明下我这边工作中使用的场景

仅供参考

所以这里就需要生成证书了

我先给大家看下最终实现的图片效果

这里要先说明一下

图片上的文字都是动态变化的即不同的订单对应的图片内容都不一样
图片上还可以嵌入图片哦比如上图的logo图片

下面说下我是如何解决的

通过PhantomJS来实现

这种方式是不能实现这个需求的

这个的原理就是对网页截图但只能对于静态页面截图不能根据不同的参数值动态生成图片

所以不提倡使用这种方式

但也介绍下这种使用方式朋友们根据自己的实际需求情况有选择的使用

通过html代码实现图片的效果放入web容器(比如nginx)中部署

这是h5代码

安装一个docker nginx 将test文件夹加载到nginx容器的/usr/share/nginx/html目录下面

docker run --name nginx80  -p 8000:80  -v /tmp/test:/usr/share/nginx/html -d docker.io/nginx

访问的页面效果

访问该页面进行截图

这张图片是截图生成的图片但url中的id值并没有传给页面

在h5代码中请求后端接口获取数据动态显示出来也是不可以的

所以这种方式使用局限性很窄

简单介绍下代码原理

大致原理是通过http请求该url获取该url的文件流然后解析h5代码生成图片

通过SVG模版动态生成

先写svg模版（其实也是h5代码）

读取svg模版动态传入参数生成图片

其实现原理大致为读取svg document h5代码将动态参数map解析到h5代码中转换成字节数组生成图片格式

Linux环境图片中文乱码

我本地是mac系统没有这个问题在发布到测试环境linux系统出现了这个问题

先看下问题的现象

看到了没生成的图片中文全是乱码

原因是因为linux系统没有中文字体

既然linux系统没有中文字体那么就安装它嘛 let's 盘它！！！

先看下mac环境的字体情况

安装字体管理工具

brew install fontconfig

查看支持中文

fc-list :lang=zh    (注意‘：’前的空格)

mac环境默认会安装很多中文字体

再看下linux环境

安装字体管理工具

yum -y install fontconfig

查看支持中文

fc-list :lang=zh

果然没有中文字体

开始安装中文字体

将mac环境的宋体上传到linux环境

a 先在mac系统中找到字体安装目录

/System/Library/Fonts

b 找到宋体对应的文件

c 将该文件上传到linux指定的目录下

/usr/share/fonts/chinese

d 赋予文件夹操作权限

chmod -R 755 /usr/share/fonts/chinese

e 安装ttmkfdir来搜索目录中所有的字体信息，并汇总生成fonts.scale文件

yum -y install ttmkfdir

ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir

修改字体配置文件

vi /etc/fonts/fonts.conf添加<dir>/usr/share/fonts/chinese</dir>

刷新内存中的字体缓存

fc-cache

确认是否安装成功

在jdk中安装该宋体

a 找到jdk所在的安装目录

echo $JAVA_HOME

b 将宋体文件复制过来

cp /usr/share/fonts/chinese/STHeiti\ Light.ttc /usr/local/software/jdk1.8.0_141/jre/lib/fonts/fallback

fallback代表存放后备语言的文件夹

重启java服务即可

DEMO代码

https://gitee.com/pingfanrenbiji/resource/tree/master/image

注意: 引入的依赖问题

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

  <!--svg-->  <dependency>   <groupId>com.github.hui.media</groupId>   <artifactId>svg-core</artifactId>   <version>2.5</version>  </dependency>

这些依赖jar包我是上传到了公司的私服上了

若是朋友们下拉不下来

我提供给大家这些底层jar包的实现源码

https://gitee.com/pingfanrenbiji/quick-media

自行上传到自己的私服即可