ECharts 的Base64图片后台解析

最新推荐文章于 2024-06-04 17:37:38 发布
最新推荐文章于 2024-06-04 17:37:38 发布
阅读量2.6w 收藏 17
点赞数 11
分类专栏： js echarts 报表 文章标签： java 报表 base64 图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshizhangliang999/article/details/45197877
版权
最近做了项目的报表使用到了百度的echarts，后来新的需求又来了，要求该报表图片实现邮件发送。也就是说报表图片能够被邮件发送。实际上其他问题都没什么，最重要的就是怎么将前台的图片信息发送到后台，并且能够在后台能够使用Java进行解析。在网上找了一些，但是并没找到完美的解决方案【可能是没找全吧！“勿喷”】。以下是我的解决方案，希望能够解决你的问题。前台：首先在js中定义一个全局
摘要由CSDN通过智能技术生成

最近做了项目的报表使用到了百度的echarts，后来新的需求又来了，要求该报表图片实现邮件发送。也就是说报表图片能够被邮件发送。

实际上其他问题都没什么，最重要的就是怎么将前台的图片信息发送到后台，并且能够在后台能够使用Java进行解析。

在网上找了一些，但是并没找到完美的解决方案【可能是没找全吧！“勿喷微笑”】。

以下是我的解决方案，希望能够解决你的问题。

前台：
首先在js中定义一个全局变量 var myChart ;  ，这样的好处是：传递到后台的图片base64信息是最新的，并且可以使用echarts的动画效果。 可能你并不理解这个意思，那么请看下面。
如果设置的是局部变量：


最低0.47元/天 解锁文章
LightZhang666
关注
  • 11
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
echarts图片文件封装formData上传到后端接口
温柔已看透的博客
01-17 1331
需求 前端传echarts图片文件到后台，请求参数为MultipartFile文件，由前端采用base64ToFile，将echarts图片数据转为file文件上传 后端代码 @PostMapping("/export") public void export(@RequestParam("file") MultipartFile file, HttpServletResponse response) throws IOException { flightReportServ
echarts 保存图片到后台下载
12-20
### ECharts保存图片至后台并下载的技术解析 #### 前言 在现代Web开发中，数据可视化变得越来越重要，而ECharts作为一款强大的图表库，因其丰富的图表类型和高度可定制化的特性，在数据可视化领域得到了广泛的应用...
vue + echarts 生成图片并上传到服务器
suimengfeiyang123的博客
12-26 636
/ 获取文件格式（image/png、image/jpeg、image/webp等）// charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元。// 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元。// 使用atob()对base64数据进行解码 返回文件数据流。// 根据解码后数据流的长度创建一个等长的整形数字数组。//获取图片的base64传递后台，生成图片，供导出报表使用。// 获取解码后 文件数据流的长度。// 创建File文件对象。
vue 将echart 下载为base64图片
最新发布
qq_41737172的博客
06-04 232
前端实现将echarts放入word文件中导出下载。3 将多个echart下载为base64图片。1 echart是页面的子组件，2 页面有多个echart。
echarts获取图片base64字符串
ConstXiong
02-19 2347
echarts获取图片base64字符串 var obj = document.getElementById("chartId"); var myChart = echarts.init(obj);// $obj为原生dom对象 myChart.getDataURL({ type: 'jpeg', //png | jpeg pixelRatio: 2, backgroundCo...
echarts图片生成base64
yhj198927的博客
07-06 2032
将echarts生成base64时会调用echart.getDataURL();方法，但是只会看到一张背景，没有数据，这是因为在series里没有将添加如下设置： animation: false,//用于生成base64，不设置的话，会只有背景没有数据
java js base64_前端js 生成的base64位图片在后端 java 解析
weixin_34638409的博客
02-20 325
// 1.需要引入的包import java.awt.image.BufferedImage;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.O...
php解析base64数据生成图片的方法
10-20
这里的`your_base64_encoded_string`是你需要解析的Base64编码的图片数据。 2. **创建图像文件** 解码后的数据是原始的图像二进制流，可以使用PHP的图像处理函数（如`imagecreatefromstring()`）来创建一个新的...
linux下图片批量转base64
06-16
#功能说明:批量将图片文件转换未base64编码文件(txt格式) #使用说明:将需要转换的批量图片与当前脚本存到到同一目录， # 给当前脚本赋予可执行权限 # 执行脚本即可生成与之对应的txt文件，文件内存放base64编码 #...
labview 图片缩放 base64编码base64解码
08-07
在这个特定的场景中，我们关注的是如何在LabVIEW中处理图片，包括图片的缩放、Base64编码和解码。 1. **图片缩放**： 在LabVIEW中，你可以使用图像处理库来实现图片的缩放功能。这个库提供了各种图像操作函数，...
怎么样让ECharts从后台获取数据并展示
08-11
今天有空，把项目中用到的几个报表图形拿出来分享一下。 主要是饼图和柱状图，结合点击事件获取点击的数据。
Base64转图片
09-24
在本项目中，"Base64转图片"是一个基于MFC（Microsoft Foundation Classes）开发的小工具，它实现了Base64编码字符串与图片之间的相互转换。MFC是微软提供的一套C++类库，用于简化Windows应用程序的开发，它封装了...
前台BASE64编码方式显示图片；后台将BASE64字符串解析为图片:
weixin_41106580的博客
05-04 2453
前台BASE64编码方式显示图片； <img src="data:image/jpg;base64,"+BASE64code id="idPic"/> 后台将BASE64字符串解析为图片: public static boolean GenerateImage(String imgStr,String imgFilePath ){ if (imgStr...
echarts图表生成base64
qq_43039004的博客
11-30 1986
1. 首先我们先生成我们的图表 具体配置不详细写了 2.我们在点击的时候去获取我们的图表并转成base64格式 itemClick(){ console.log(document.getElementById('mydome').getElementsByTagName('canvas')[0]) let baseCanvas = document.getElementById('mydome').getElementsByTagName('canvas')[0]
echarts获取图表的base64编码格式数据
bigbear776的博客
03-10 1310
function getFullCanvasDataURL(divId){ //将第一个画布作为基准。 var baseCanvas = $("#"+divId).find("canvas").first()[0]; if(!baseCanvas){ return false; }; var width = baseCanvas.width; var height = baseCanvas.height; var ctx = base.
前端抽取echarts图到后台保存
Edward·Che的博客
03-06 2105
1、前端js代码 主要是拿myChartQyyljg.getDataURL()函数来进行获取echarts图片对应的base64数据传到后台进行将图片保存。 function getTrzyCharts(){ var image = myChartQyyljg.getDataURL({type:'png',backgroundColor:'041c5b'}); $.ajax(...
将ECharts图表保存为图片并发送至服务端
duansamve的博客
07-29 2315
将ECharts图表保存为图片并发送至服务端
echarts生成图表并转换为base64格式
是暖暖呀的博客
10-17 966
echarts生成图表并转换为base64格式
js解析base64图片
04-19
好的，我可以回答这个问题。在 JavaScript 中解析 Base64 格式的图片可以使用如下代码： ```javascript var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...'; // 填入你的 base64 数据 var imgElement = document.createElement('img'); imgElement.src = imgData; document.body.appendChild(imgElement); ``` 其中，`imgData` 就是你要解析的 Base64 格式的图片数据，可以用 `data:image/类型;base64,` 的形式定义图片的 MIME 类型和 Base64 编码的数据。然后，通过创建一个 `img` 元素并将其 `src` 属性设置为 `imgData`，就可以将 Base64 格式的图片显示在页面上了。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值