Echart图表在服务器端生成图片

根据生成的Echart图表获取图表相关信息,chart.getDataURL(),并将相关信息传递给服务器,服务器根据传递的信息生成对应的图片到指定位置
前端代码

//图表实例
var chart= ec.init($(".chart")[0]);
/**
 * 导出文件类型 -html excel pdf
 * @param type
 */
function exportFile(type){
     // 向后台发起请求保存图片到指定目录.
     var param={
             "downType":type,
             "picInfo": chart.getDataURL()
     }
     $.ajax({
         type:'post',
         url: ctx+"/*****/saveImage.do?"+csrfName+"="+csrfValue,
         data: param,
         success: function(msg) {
             console.log(msg)
             if(msg != "error"){
                    console.log("the file is exit----------------")
             }else{//文件保存成图片失败
                    console.log("the file is not exit----------------")

             }
         },
         error:function(){
         }
     });
}

后端代码:

    /**
     * Echart图片生成
     * @return
     * @throws IOException 
     */
    @RequestMapping(value = "/******/saveImage.do", method = RequestMethod.POST)
    public void saveEchartImage(HttpServletRequest request, HttpServletResponse response) throws IOException{
        String picInfo=request.getParameter("picInfo");
        UUID uuid = UUID.randomUUID();
        String name=uuid.toString();
        String downloadtype=request.getParameter("downType");
        if (StringUtils.isBlank(picInfo)) {
            log.debug("picInfo为空,未从前台获取到base64图片信息!");
            response.getWriter().write("error");
        }else{
            File currpath = new File(getClass().getClassLoader().getResource("").getPath());
            //获取服务器根路径
            File parentPath = new File(currpath.getParent());
            String pppath = parentPath.getParent(); 
            String imgFolder=pppath+ "/imgfile/";
            String imgPath = imgFolder+name+".png" ;//图片存储路径
           log.debug("saveEchartImage img is:"+imgPath);
            // 传递过程中  "+" 变为了 " ".
            String newPicInfo = picInfo.replaceAll(" ", "+");
            decodeBase64(newPicInfo, new File(imgPath));
            //log.warn("从echarts中生成图片的的路径为:{}", picPath);
            response.getWriter().write(name);
        }
    }

     /**
     * 解析Base64位信息并输出到某个目录下面.
     * @param base64Info base64串
     * @param picPath 生成的文件路径
     * @return 文件地址
     */
    private File decodeBase64(String base64Info, File picPath) {
        if (StringUtils.isEmpty(base64Info)) {
            return null;
        }
        // 数据中:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ...  在"base64,"之后的才是图片信息
        String[] arr = base64Info.split("base64,");
        // 将图片输出到系统某目录.
        OutputStream out = null;
        try {
            // 使用了Apache commons codec的包来解析Base64
            byte[] buffer = Base64.decodeBase64(arr[1]);
            out = new FileOutputStream(picPath);
            out.write(buffer);
        } catch (IOException e) {
            //e.printStackTrace();
            log.error("解析Base64图片信息并保存到某目录下出错!", e);
        } finally {
            IOUtils.closeQuietly(out);
        }
        return picPath;
    }

可以在指定路径查看生成的图片

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三知之灵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值