後臺java 使用PhantomJS把echart保存成圖片
項目是在瀏覽器展示折線，柱狀圖，使用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+")");
//獲取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圖片。