SVG标签内容转base64

最新推荐文章于 2025-05-14 19:50:51 发布

月下脆竹書閣

最新推荐文章于 2025-05-14 19:50:51 发布

阅读量789

点赞数 3

CC 4.0 BY-SA版权

分类专栏： VUE html 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/c_x_m/article/details/137217715

VUE 同时被 2 个专栏收录

56 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用ECharts生成的SVG数据，通过`getElementsByTagName`获取SVG元素，将其转换为Blob对象，然后利用FileReader读取并转化为Base64格式，以便于在前端进行其他操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts 图表是用svg渲染的，所以需要获取svg标签的内容即可

const svg = this.$refs.barchart.getElementsByTagName("svg")[0];
const echartsSvg = svg.outerHTML;
//SVG转Base64 
const svgString = echartsSvg; // 这里填入你的SVG字符串
const svgBlob = new Blob([svgString], { type: "image/svg+xml" });

const _this1 = this;
// 使用 FileReader 读取 Blob，并在完成时生成 base64 字符串
let reader = new FileReader();
reader.onload = function () {
	const base64data = reader.result;
	// 使用base64data进行后续操作
	let imgSrc = base64data;
};
reader.readAsDataURL(svgBlob);