前端抽取echarts图到后台保存

87 阅读 0 评论 58 点赞

我是靠谱客的博主聪慧白昼，最近开发中收集的这篇文章主要介绍前端抽取echarts图到后台保存，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、前端js代码

主要是拿myChartQyyljg.getDataURL()函数来进行获取echarts图片对应的base64数据传到后台进行将图片保存。

function getTrzyCharts(){
var image = myChartQyyljg.getDataURL({type:'png',backgroundColor:'041c5b'});
$.ajax({
type: 'post',
url: interface_get_echarts_data,
data : {'image':image},
dataType : "text",
success : function(data) {
alert("成功!");
},
error : function(error, status) {
alert("机构数据错误!");
}
});
}

2、controller

@PostMapping("/getBase64")
@ApiOperation(value = "获取图片资源")
public ResponseResult getBase64(HttpServletRequest request, HttpServletResponse respons) throws Base64DecodingException {
return service.DealPic(request, respons);
}

3、service

/**
* @definition 1、获取前端传的echarts图片的base64 2、保存到本地
* @author edward Che
* @param request
* @param respons
*/
public ResponseResult DealPic(HttpServletRequest request, HttpServletResponse respons)throws Base64DecodingException {
String src = request.getParameter("image");
//String base64 = src.replaceAll(" ", "+");
String path = filePath;
//图片保存到本地并返回图片路径
String picUrl = path +"/"+ (imgUtil.saveImg(src)).replaceAll("\\", "/");
//文件保存路径
String docUrl = path + fileSten;
String pdfUrl = WordInsertInfo(docUrl,picUrl);
Map<String,String> res = new HashMap<>();
res.put("pdfUrl",pdfUrl);
return new ResponseResult(res);
}

4、保存图片方法

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import com.base.util.UUIDUtil;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import sun.misc.BASE64Decoder;
import com.sun.org.apache.xml.internal.security.exceptions.Base64DecodingException;
import com.sun.org.apache.xml.internal.security.utils.Base64;
import static java.io.File.separator;
/**
* @definition 根据传递的base64保存图片至本地
* @author edward Che
*/
@Component
public class IMGUtil {
@Value("${filePath.home}")
private String filePath;
public String saveImg(String baseImg) throws Base64DecodingException {
//定义一个正则表达式的筛选规则，为了获取图片的类型
String rgex = "data:image/(.*?);base64";
String type = getSubUtilSimple(baseImg, rgex);
//去除base64图片的前缀
baseImg = baseImg.replaceFirst("data:(.+?);base64,", "");
byte[] b;
byte[] bs;
OutputStream os = null;
String fileName = "";
String nowDate = "";
// 格式化并获取当前日期（用来命名）
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
nowDate = format.format(new Date());
//把图片转换成二进制
b = Base64.decode(baseImg.replaceAll(" ","+"));
//生成路径
String path = filePath+"/"
+ separator + "img" + separator + nowDate + separator;
//随机生成图片的名字，同时根据类型结尾
fileName = UUIDUtil.uuid() + "." + type;
File file = new File(path);
if (!file.exists() && !file.isDirectory()) {
file.mkdirs();
}
File imageFile = new File(path + "/" + fileName);
BASE64Decoder d = new BASE64Decoder();
// 保存
try {
bs = d.decodeBuffer(Base64.encode(b));
os = new FileOutputStream(imageFile);
os.write(bs);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
if (os != null) {
try {
os.close();
} catch (IOException e) {
e.getLocalizedMessage();
}
}
}
return "img" + separator + nowDate + separator + fileName;
}
public static String getSubUtilSimple(String soap,String rgex){
Pattern pattern = Pattern.compile(rgex);
Matcher m = pattern.matcher(soap);
while(m.find()){
return m.group(1);
}
return "";
}
}