来源:http://blog.csdn.net/woshizhangliang999/article/details/45197877
最近做了项目的报表使用到了百度的echarts,后来新的需求又来了,要求该报表图片实现邮件发送。也就是说报表图片能够被邮件发送。
实际上其他问题都没什么,最重要的就是怎么将前台的图片信息发送到后台,并且能够在后台能够使用Java进行解析。
在网上找了一些,但是并没找到完美的解决方案【可能是没找全吧!“勿喷”】。
以下是我的解决方案,希望能够解决你的问题。
前台:
首先在js中定义一个全局变量 var myChart ; ,这样的好处是:传递到后台的图片base64信息是最新的,并且可以使用echarts的动画效果。 可能你并不理解这个意思,那么请看下面。
如果设置的是局部变量:
想要获取这种图片效果【显示出全部正确的信息】,那么就必须关闭echarts的动画效果【animation : false,】,不然得到的图片为:
上面所示,就是定义局部变量并且没有关闭动画效果所获取的图片信息。
好了,现在说我的方法:
- var myChart ; // 全局变量
- function EconfigAPI(data){
- // 路径配置
- require.config({
- paths: {
- echarts: './js/echarts'
- }
- });
- // 使用
- require(
- [
- 'echarts',
- 'echarts/chart/pie' // 使用柱状图
- ],
- function (ec) {
- synDrawEcharts(ec,data);
- }
- );
- }
- function synDrawEcharts(ec,data){
- //--- 折柱 ---
- barCampaign = ec.init(document.getElementById('divCampaign'),theme);// 缴费情况
- myChart = barCampaign; // 赋给全局变量
- barCampaign.showLoading({
- text : "图表数据正在努力加载..."
- });
- ...... // 省略
- }
- var picBase64Info = myChart.getDataURL(); //获取base64编码
- // 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 图片
后台的处理:
- String picBase64Info = params.getString("picBase64Info"); // 传递过正中 "+" 变为了 " "
- picBase64Info = picBase64Info.replaceAll(" ", "+");
- String picPath = decodeBase64(picBase64Info, file); // 读取图片信息,返回图片保存路径
- /**
- * 解析base64,返回图片所在路径
- * @param base64Info
- * @return
- */
- private String decodeBase64(String base64Info, File filePath){
- if(StringUtils.isEmpty(base64Info)){
- return null;
- }
- BASE64Decoder decoder = new BASE64Decoder();
- String[] arr = base64Info.split("base64,");
- // 数据中:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ... 在"base64,"之后的才是图片信息
- String picPath = filePath+ "/"+ UUID.randomUUID().toString() +".png";
- try {
- byte[] buffer = decoder.decodeBuffer(arr[1]);
- OutputStream os = new FileOutputStream(picPath);
- os.write(buffer);
- os.close();
- } catch (IOException e) {
- throw new RuntimeException();
- }
- return picPath;
- }
实例图片如下:
上面两张图中,第二张是经过拖动过后然后在后台获取的图片。