js 把svg转换成base64
要将SVG转换为Base64,可以使用JavaScript的Canvas API来实现。以下是一个示例代码:
// 创建一个新的Canvas元素
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// 获取SVG元素
var svg = document.querySelector('svg');
// 获取SVG的宽度和高度
var width = svg.getAttribute('width');
var height = svg.getAttribute('height');
// 设置Canvas的宽度和高度
canvas.width = width;
canvas.height = height;
// 创建一个新的Image元素
var image = new Image();
// 将SVG绘制到Canvas上
var svgData = new XMLSerializer().serializeToString(svg);
var svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
var svgUrl = URL.createObjectURL(svgBlob);
image.onload = function() {
// 将SVG转换为Base64
context.drawImage(image, 0, 0);
var base64Data = canvas.toDataURL('image/png');
// 在控制台输出Base64数据
console.log(base64Data);
// 可以将Base64数据赋值给一个img元素的src属性,显示图片
// var img = document.createElement('img');
// img.src = base64Data;
// document.body.appendChild(img);
};
image.src = svgUrl;
这段代码将SVG绘制到一个Canvas元素上,然后使用toDataURL方法将Canvas内容转换为Base64数据。你可以在控制台输出Base64数据,或将其赋值给一个img元素的src属性,以显示图片。
原文地址: http://www.cveoy.top/t/topic/ij5D 著作权归作者所有。请勿转载和采集!