后台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);//展示echartsjs.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 Linuxdcaps.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的情况处理不好，容易让生成的图片丢失一部分。）

后台java 使用PhantomJS把echart保存成图片相关推荐

JAVA PPT 柱状图_Java 将 PPT 形状（表格、文本框、心形、图表等）保存成图片
MS PowerPoint中的表格.文本框.心形.图表.图片等均可以称为形状,将这些形状保存成图片,便可分类储存,方便日后查找,再利用. 本文将介绍如何使用 Spire.Presentation fo ...
java 视频抽帧_opencv3.2.0实现视频抽帧，并保存成图片
.实现指定帧数的抽取.和全部帧数的抽取,并保存到指定目录. 在QT新建一个控制台程序,程序源码如下:(程序实现每十帧获取一次帧) #include #include #include #include ...
html保存当前页面为图片,将html页面保存成图片,图片写入pdf的实现方法(推荐)
需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入 html2can ...
BitmapUtil【缩放bitmap以及将bitmap保存成图片到SD卡中】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言用于缩放bitmap以及将bitmap保存成图片到SD卡中效果图代码分析 bitmapZoomByHeight(Bitmap s ...
使用 html2canvas 将页面保存成图片
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏,比如移动端常见的"长按网页保存为图片"功能.这个借助 html2canvas 这个第三方 js 库即可实现,下面通过样例演示 ...
【签名】点击按钮弹出签名框,保存成图片,并显示出来
js实现点击按钮弹出签名框(不一定在最下面弹出!) 使用app.js和signature_pad.js生成签名框和保存成图片,此处都是在body的最底部生成img标签: function downlo ...
php 文字图片怎么保存为图片,php技术实现加载字体并保存成图片
下面通过一段代码给大家详解介绍下php技术实现加载字体并保存成图片. // Set the content-type header("Content-type: image/png" ...
生成二维码并将Bitmap保存成图片
本来项目集成的Zxing Bitmap qrCode = EncodingHandler.createQRCode(shareUrl, DimenUtils.dp2px(105)); 虽然这个类生成的 ...
Chrome浏览器网页保存成图片
Chrome浏览器把整个网页保存成图片 1.使用快捷键 F12打开开发人员工具功能, 2.按快捷键Ctrl + Shift + P(Mac 为 ⌘Command + ⇧Shift + P) 3.输入 ...

后台java 使用PhantomJS把echart保存成图片

后台java 使用PhantomJS把echart保存成图片

后台java 使用PhantomJS把echart保存成图片相关推荐

最新文章

热门文章