要将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属性,以显示图片。

js 把svg转换成base64

原文地址: http://www.cveoy.top/t/topic/ij5D 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录