后台java 使用PhantomJS把echart保存成图片
项目是在浏览器展示折线，柱状图，使用echarts效果不错。希望能把echarts图形通过后台程序保存成图片或者保存到word中，供客户做专题报告时使用。
从网上搜索了一些java使用PhantomJS的文章，大部分都是java调用Runtime.getRuntime().exec()的方式调用js。然后由js处理echarts数据。感觉这样不灵活，而且图片不一定是一张。
我的思路是：
#####使用phantomjsdriver jar包，后台把数据加载到一个html模版页中，然后通过dom操作提取echarts的数据。
具体步骤如下：
1.引入phantomjsdriver jar包
#最好不要引用高版本的jar,我之前引用了1.4.4或1.4.3版本的jar，使用时就报方法不一致和class非public的问题
compile group: ‘com.codeborne’, name: ‘phantomjsdriver’, version: ‘1.2.1’
2.设计一个可以展示echarts的html页面（html页面写的不好哈）
将页面放到可以访问的地址，我这用的是：http://testurl.com/file/upload/saveEchartHtml.html
<html>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<script src="http://gssn.fw121.com/js/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.0/echarts.min.js"></script>
</head>
<body>
<!-- 因为我需要生成两个图片 所以定义了两个echarts -->
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="temEcharts" style="height:400px;width:550px"></div>
<div id="rhEcharts" style="height:400px;width:550px"></div>
</body>
<script>
var temEcharts=null;
var rhEcharts=null;
$(function() {
// 基于准备好的dom，初始化echarts实例
temEcharts = echarts.init(document.getElementById('temEcharts'));
rhEcharts = echarts.init(document.getElementById('rhEcharts'));
});
function showImg(surfData){
var option ={
title : {text : '温度(°C)', left : 'center'},
xAxis: {type: 'category', data: []},
yAxis: {type: 'value'},
series: [{data: [], type: 'line', smooth: true}]
}
if(surfData.length <= 0){
alert("暂时没有查询到监测数据");
temEcharts.clear();
rhEcharts.clear();
return;
}else{
//pre24h需要的数据
var pre24hdata = echarts.util.map(surfData, function (entry) {
return entry.pre24h==undefined || entry.pre24h=='99999' ?0:entry.pre24h;
});
//温度需要的数据
var temdata = echarts.util.map(surfData, function (entry) {
return entry.tem==undefined?0:entry.tem/10;
});
//x轴需要的数据
var xAxisData = echarts.util.map(surfData, function (entry) {
return formatData(new Date(entry.dataTime), 'MM-dd');
});
option.series[0].data=temdata;
option.xAxis.data=xAxisData;
temEcharts.setOption(option);
option.series[0].data=pre24hdata;
option.title.text='降水(mm)';
option.series[0].type="bar";
rhEcharts.setOption(option);
}
}
function returnEchartImg(echartObj){
return echartObj.getDataURL();
}
var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
var DEFAULT_PATTERN = 'yyyy-MM-dd';
function formatData(date, pattern) {
pattern = pattern || DEFAULT_PATTERN;
return pattern.replace(SIGN_REGEXP, function ($0) {
switch ($0.charAt(0)) {
case 'y': return padding(date.getFullYear(), $0.length);
case 'M': return padding(date.getMonth() + 1, $0.length);
case 'd': return padding(date.getDate(), $0.length);
case 'w': return date.getDay() + 1;
case 'h': return padding(date.getHours(), $0.length);
case 'm': return padding(date.getMinutes(), $0.length);
case 's': return padding(date.getSeconds(), $0.length);
}
});
};
function padding(s, len) {
var len = len - (s + '').length;
for (var i = 0; i < len; i++) { s = '0' + s; }
return s;
};
</script>
</html>
3.准备需要用到的demo数据（需要将list转成字符串）
String surfData="[
{\"dataTime\":1524758400000,\"dpt\":\"99999\",\"pre24h\":\"999\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"227\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"53\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1524844800000,\"dpt\":\"99999\",\"pre24h\":\"399\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"197\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"66\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1524931200000,\"dpt\":\"99999\",\"pre24h\":\"99999\",\"prs\":\"299\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"207\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"62\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525017600000,\"dpt\":\"99999\",\"pre24h\":\"99999\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"99999\",\"tem\":\"191\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"49\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525190400000,\"dpt\":\"99999\",\"pre24h\":\"959\",\"prs\":\"99999\",\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"57\",\"temMax\":\"99999\",\"temMin\":\"99999\",\"vis\":\"99999\",\"windDAvg10mi\":\"68\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525276800000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"188\",\"windDAvg10mi\":\"97\",\"windSAvg10mi\":\"99999\"},{\"dataTime\":1525363200000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"216\",\"windDAvg10mi\":\"51\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525449600000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"183\",\"windDAvg10mi\":\"49\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525536000000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"176\",\"windDAvg10mi\":\"91\",\"windSAvg10mi\":\"99999\"},{\"dataTime\":1525622400000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"178\",\"windDAvg10mi\":\"90\",\"windSAvg10mi\":\"99999\"},
{\"dataTime\":1525708800000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"190\",\"windDAvg10mi\":\"94\",\"windSAvg10mi\":\"99999\"},{\"dataTime\":1525795200000,\"rhu\":\"0\",\"station\":\"Y1248\",\"sunlight\":\"\",\"tem\":\"181\",\"windDAvg10mi\":\"73\",\"windSAvg10mi\":\"99999\"}]";
4.java使用PhantomJS调用刚才的页面生成echarts图片
private List<String> saveSurfModelUrlToImg(String surfData) {
List<String> imageBase64List = new ArrayList<String>();
PhantomJSDriver driver=getPhantomJSDriver();
// 让浏览器访问空间主页
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
driver.get("http://testurl.com/file/upload/saveEchartHtml.html");
JavascriptExecutor js = (JavascriptExecutor) driver;
//设置surf数据到页面
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
//展示echarts
js.executeScript("showImg("+surfData+")");
//加入一段休眠时间，防止js执行没完成就进行的 读取echart图片数据的功能。
Thread.sleep(3000);
//获取echart图片数据
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
String temTxt=(String) js.executeScript("return returnEchartImg(temEcharts)");
driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
String phTxt=(String) js.executeScript("return returnEchartImg(rhEcharts)");
//imageBase64放到list中
imageBase64List.add(temTxt.replace("data:image/png;base64,",""));
imageBase64List.add(phTxt.replace("data:image/png;base64,",""));
// ImgFileUtils.GenerateImage(temTxt,"d://tem01.png");
// ImgFileUtils.GenerateImage(phTxt,"d://ph01.png");
driver.close();
driver.quit();
return imageBase64List;
}
private PhantomJSDriver getPhantomJSDriver() {
//设置必要参数
DesiredCapabilities dcaps = new DesiredCapabilities();
//ssl证书支持
dcaps.setCapability("acceptSslCerts", true);
//截屏支持
dcaps.setCapability("takesScreenshot", true);
//css搜索支持
dcaps.setCapability("cssSelectorsEnabled", true);
//js支持
dcaps.setJavascriptEnabled(true);
//驱动支持
String osname = System.getProperties().getProperty("os.name");
if (osname.equals("Linux")) {//判断系统的环境win or Linux
dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY,"/usr/bin/phantomjs");
} else {
dcaps.setCapability(PhantomJSDriverService.PHANTOMJS_EXECUTABLE_PATH_PROPERTY,"D:\\phantomjs-2.1.1\\bin\\phantomjs.exe");
}
//创建无界面浏览器对象
PhantomJSDriver driver = new PhantomJSDriver(dcaps);
return driver;
}
这样生成图片的代码就完成了。如果需要比较生成的图片与浏览器展示的是否一致，可以通过注释代码生成echarts图片。（注：不要生成base64字符，然后用在线图片转码工具测试，在线转码工具对AAAA的情况处理不好，容易让生成的图片丢失一部分。）
8448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
