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

后台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

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 saveSurfModelUrlToImg(String surfData) {
        List imageBase64List = new ArrayList();
        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的情况处理不好，容易让生成的图片丢失一部分。）