一.js:
function updateChart(versionList,rateList) { option = { title: { text: '拖动频次' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { itemWidth:15, itemHeight:15, data:['拖动频次[拖动次数/小时]'], }, animation : false, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : versionList, axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value', name:'次/小时', axisLabel: { formatter: '{value}', } }, ], series : [ { name:'拖动频次[拖动次数/小时]', type:'bar', barWidth: '50%', itemStyle:{ normal:{ color:'rgba(58,95,205,1)', borderType : 'dashed', barBorderRadius:[10, 10, 10, 10], } }, label: { normal: { show: true, position: 'top', textStyle: { color: 'black' } } }, data:rateList } ] }; chart.setOption(option, true); var projectId = GetQueryString('projectId'); picLoad(chart.getDataURL(),"/Btm20LCDDragfrequency"+projectId+".png"); } 注意: animation : false, 否则图片不能保存
function picLoad(dataPic,picName){ $.ajax({ type : 'POST', url : '/ajax/loadPic', data : { "data" :dataPic, "name" : picName }, contentType : "application/x-www-form-urlencoded", success : function(data) { } }); } 解释: 1.chart.getDataURL()方法获取base64编码,获取的结果是: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ... 在"base64,"之后的才是图片信息
二.后台
@RequestMapping(value = "/loadPic", method = RequestMethod.POST, produces = {"application/json;charset=UTF-8"}) public @ResponseBody Map<String, Object> reg(HttpServletRequest request, HttpServletResponse response) { Map<String, Object> result = new HashMap<String, Object>(); String name = request.getParameter("name"); String[] picData = request.getParameter("data").split(","); try { byte[] n = new BASE64Decoder().decodeBuffer(picData[1]); String path = Thread.currentThread().getContextClassLoader().getResource("").getPath(); path = path + "folderPath.properties"; Properties prop = new Properties(); prop.load(new FileInputStream(path)); String filePath = prop.getProperty("UploadPicImagePath"); File fp = new File(filePath); if (!fp.exists()) { fp.mkdirs(); } OutputStream out = new FileOutputStream(new File(filePath+name)); out.write(n); out.flush(); out.close(); result.put("code", 200); } catch (FileNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } logger.info(name+" save success"); return result; }
三.获取图片
@Override public boolean sendFingerReport(Integer projectId, Integer versionId, String userGroup, Btm20LCDEmailConfig emailConfig) throws Exception { Map<String, Object> emailMap = new HashMap<String, Object>(); // 版本 Version version = this.versionService.getVersionById(versionId); emailMap.put("version", version); emailMap.put("projectId", projectId); String path = Thread.currentThread().getContextClassLoader().getResource("").getPath(); path = path + "folderPath.properties"; Properties prop = new Properties(); prop.load(new FileInputStream(path)); String filePath = prop.getProperty("UploadPicImagePath"); File f1 = new File(filePath + "/Btm20LCDAPPBrigthDrag" + projectId + ".png"); if (f1.exists()) { emailMap.put("Btm20LCDAPPBrigthDrag", filePath + "/Btm20LCDAPPBrigthDrag" + projectId + ".png"); } // 收件人 String receiver = ""; if (emailConfig != null && !CheckUtils.isNullOrBlank(emailConfig.getReciverId())) { TmGroup tmGroup = this.tmGroupService.selectTmGroupById(emailConfig.getReciverId()); if (!CheckUtils.isNullOrBlank(tmGroup) && !CheckUtils.isNullOrBlank(tmGroup.getMemberArr())) { String[] groupMembers = tmGroup.getMemberArr().split(","); for (int i = 0; i < groupMembers.length; i++) { receiver += this.personInfoService.selectPersonInfoById(Integer.parseInt(groupMembers[i])) .getEmail() + ","; } } } String mailText = templateEmailService.getMailText("/btm20/email/btm20LcdMail.ftl", emailMap); Email email = new Email(); email.setEmail(true);// 标记收件人是不是邮箱 email.setSubject(emailConfig.getSubject()); email.setTo(receiver); email.setCc(copyTo); email.setContent(mailText); boolean send = EmailServerTerminal.send(email,"btm20"); return send; }