js 把svg字符串 转换成base64图片

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

1. 将SVG字符串放入一个<svg>标签中，并将其插入到DOM中：

const 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>";
const svgElement = document.createElement("svg");
svgElement.innerHTML = svgString;
document.body.appendChild(svgElement);

2. 使用XMLSerializer将DOM中的SVG元素转换为字符串：

const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgElement);

3. 创建一个新的Image对象，并将SVG字符串作为其src属性值：

const image = new Image();
image.src = "data:image/svg+xml;base64," + window.btoa(svgString);

4. 等待图片加载完成后，可以将其绘制到Canvas上，或者直接将其插入到DOM中：

image.onload = function() {
  // 将图片绘制到Canvas上
  const canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext("2d");
  context.drawImage(image, 0, 0);

  // 将Canvas转换为Base64图片
  const base64Image = canvas.toDataURL("image/png");

  // 插入到DOM中
  const imgElement = document.createElement("img");
  imgElement.src = base64Image;
  document.body.appendChild(imgElement);
};

这样就可以将SVG字符串转换为Base64图片并插入到DOM中。