前端抽取echarts图到后台保存

短命女 2023-07-12 01:15 11阅读 0赞

1、前端js代码

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

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 "";
        }
    }