ECharts 的Base64图片后台解析

来源：http://blog.csdn.net/woshizhangliang999/article/details/45197877

最近做了项目的报表使用到了百度的echarts，后来新的需求又来了，要求该报表图片实现邮件发送。也就是说报表图片能够被邮件发送。

实际上其他问题都没什么，最重要的就是怎么将前台的图片信息发送到后台，并且能够在后台能够使用Java进行解析。

在网上找了一些，但是并没找到完美的解决方案【可能是没找全吧！“勿喷”】。

以下是我的解决方案，希望能够解决你的问题。

前台：

首先在js中定义一个全局变量 var myChart ;  ，这样的好处是：传递到后台的图片base64信息是最新的，并且可以使用echarts的动画效果。 可能你并不理解这个意思，那么请看下面。

如果设置的是局部变量：

想要获取这种图片效果【显示出全部正确的信息】，那么就必须关闭echarts的动画效果【animation ： false,】，不然得到的图片为：

上面所示，就是定义局部变量并且没有关闭动画效果所获取的图片信息。

好了，现在说我的方法：

[javascript]  view plain  copy

1. var myChart ;   // 全局变量  
2. function EconfigAPI(data){  
3.     // 路径配置  
4.     require.config({  
5.         paths: {  
6.             echarts: './js/echarts'  
7.         }  
8.     });        
9.     // 使用  
10.     require(  
11.         [  
12.             'echarts',  
13.             'echarts/chart/pie' // 使用柱状图  
14.         ],  
15.         function (ec) {  
16.             synDrawEcharts(ec,data);  
17.         }  
18.     );  
19.   }  
20.   
21. function synDrawEcharts(ec,data){  
22.     //--- 折柱 ---  
23.     barCampaign = ec.init(document.getElementById('divCampaign'),theme);// 缴费情况  
24.     myChart = barCampaign;      // 赋给全局变量  
25.   
26.     barCampaign.showLoading({    
27.             text : "图表数据正在努力加载..."   
28.             });  
29.     ...... // 省略  
30. }  
31.   
32.     var picBase64Info = myChart.getDataURL();   //获取base64编码  
33. //  var picBase64Info = myChart.getImage();     //  

var picBase64Info = myChart.getDataURL(); //获取base64编码

// var picBase64Info = myChart.getImage();  //

其中var picBase64Info = myChart.getDataURL();//获取base64编码  是根据echarts文档获取的

picBase64Info 就可以放在表单中，传递到后台。

数据样式：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAAgAElEQVR4XuzdB3hUVfo/8O+dSe8hCSlAaKJ0BBEQFBBQseFiwUVkURHEgtjWdV0bLPpTV10BRYodsWH5i64guIiAqKyASu8lgfTeJzNz/8 ........   // base64 图片

后台：

图片数据通过表单传递到了后台，可以再后台获取到信息。但是有一点必须注意：数据中的 "+"会因为传递变为 " "空格。                    

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAAgAElEQVR4XuzdB3hUVfo/8O  dSe8hCSlAaKJ0BBEQFBBQseFiwUVkURHEgtjWdV0bLPpTV10BRYodsWH5i64guIiAqKyASu8lgfTeJzNz/8 ........   // base64 图片

后台的处理：

[java]  view plain  copy

1. String picBase64Info = params.getString("picBase64Info");   // 传递过正中  "+" 变为了 " "  
2. picBase64Info = picBase64Info.replaceAll(" ", "+");  
3.   
4. String picPath = decodeBase64(picBase64Info, file);     // 读取图片信息，返回图片保存路径  
5.   
6. /** 
7.  * 解析base64，返回图片所在路径 
8.  * @param base64Info 
9.  * @return 
10.  */  
11. private String decodeBase64(String base64Info, File filePath){  
12.     if(StringUtils.isEmpty(base64Info)){  
13.         return null;  
14.     }  
15.     BASE64Decoder decoder = new BASE64Decoder();  
16.     String[] arr = base64Info.split("base64,");           
17.     // 数据中：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ...  在"base64,"之后的才是图片信息  
18.     String picPath = filePath+ "/"+ UUID.randomUUID().toString() +".png";  
19.     try {  
20.         byte[] buffer = decoder.decodeBuffer(arr[1]);  
21.         OutputStream os = new FileOutputStream(picPath);  
22.         os.write(buffer);  
23.         os.close();  
24.     } catch (IOException e) {  
25.         throw new RuntimeException();  
26.     }  
27.       
28.     return picPath;  
29. }  

这样就可以得到，实时图片了。并且可以使用echarts的动画效果。

实例图片如下：

上面两张图中，第二张是经过拖动过后然后在后台获取的图片。