JavaScript 将 SVG 字符串转换为 Base64 图片

可以使用以下方法将 SVG 字符串转换为 Base64 图片：

将 SVG 字符串插入到 HTML 的一个元素中，例如一个隐藏的 <div> 元素。

var svgString = '<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect x='0' y='0' width='100' height='100' fill='red'/></svg>';
var div = document.createElement('div');
div.innerHTML = svgString;
div.style.display = 'none';
document.body.appendChild(div);

使用 XMLSerializer 将 SVG 元素转换为 XML 字符串。

var serializer = new XMLSerializer();
var svgXML = serializer.serializeToString(div.firstChild);

创建一个新的 Image 对象，并将 SVG XML 字符串作为 src 属性值。

var img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(svgXML);

等待图片加载完成后，可以将其绘制到 canvas 上或直接显示在页面上。

img.onload = function() {
  // 在 canvas 上绘制
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 显示在页面上
  document.body.appendChild(img);
};

这样就可以将 SVG 字符串转换为 Base64 图片了。