svg标签字符串转化成base64

 const svgStr =
        `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="200px">
          <text x="0" y="30" dy="16"
          text-anchor="start"
          stroke="#000"
          stroke-opacity="0.1"
          fill="none"
          transform="rotate(-20)"
          font-weight="100"
          font-size="16"
            ${this.name}   ${this.phone ? this.phone.slice(-4) : ''}
          </text>
          <text x="200" y="150" dy="80"
          text-anchor="start"
          stroke="#000"
          stroke-opacity="0.1"
          fill="none"
          transform="rotate(-20)"
          font-weight="100"
          font-size="16"
            ${this.name}   ${this.phone ? this.phone.slice(-4) : ''}
          </text>
        </svg>`
      return `data:image/svg+xml;base64,${window.btoa(decodeURIComponent(encodeURIComponent(svgStr)))}`
 // 使用-显示出图片
 this.watermark = document.createElement('div')
 const style = `
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        pointer-events: none;
        background-repeat: repeat;
        z-index: 9999;
        background-image: url(${bgImg});
      this.watermark.setAttribute('style', style)
      this.watermarkStyle = style
      document.body.appendChild(this.watermark)
svg标签转化成base64
 
  const myImg = document.getElementById('myImg'); // 获取Img
  const svg = document.getElementById('mySvg');
   const s = new XMLSerializer().serializeToString(svg);
   const ImgBase64 = `data:image/svg+xml;base64,${window.btoa(s)}`;
   console.log(ImgBase64, 'Svg 转 Base64');
   myImg.src = ImgBase64;
Svg标签 转 png
 
   const svg = document.getElementById('mySvg');
   const s = new XMLSerializer().serializeToString(svg);
   const src = `data:image/svg+xml;base64,${window.btoa(s)}`;
   const img = new Image(); // 创建图片容器承载过渡
   img.src = src;
   img.onload = () => {
     // 图片创建后再执行，转Base64过程
     const canvas = document.createElement('canvas');
     canvas.width = img.width;
     canvas.height = img.height;
     const context = canvas.getContext('2d');
     context.drawImage(img, 0, 0);
     const ImgBase64 = canvas.toDataURL('image/png');
     console.log(ImgBase64, 'Svg 转 png');
     myImg.src = ImgBase64;
++SVG教程++
 
MDN相关资料
我们需要获取目标SVG： 
 var svg = document . querySelector ( 'svg' ) ;
 比我们必须创建宽度和高度完全像我们要转换的svg的画布： 
 var canvas = document . createElement ( 'canvas' ) ;
canvas . width = svg . getBoundingClientRect ( ) . width ;
canvas . height = svg . getBoundingClientRect ( ) . height ;
body . appendChild ( canvas ) ;
 ...魔术来了：
 XMLSerializer.serializeToSt
 随时随地将SVG转换为base64
如果像我一样，在开发时使用了大量的SVG，则可能已经到了需要将SVG用作背景图像或嵌入到javascript文件中的地步。 唯一的方法是将SVG文件转换为base64字符串，然后在需要时使用它。 该软件包正是这样做的-将SVG转换为base64。
 该软件包可在浏览器和Node环境中使用。 请继续阅读以了解操作方法。
npm i svg64
yarn add svg64
只需下载此存储库并使用dist文件夹中的文件
或从unpkg.com取消设置
< script src =" https://unpkg.com/svg64 " > </ script >
在浏览器中：
 // This is your SVG DOM element
const svg = document . getElementByI
一个简单的工具，可以将SVG转换为Base64。
它是基于开放源代码的波纹管开发的，并添加了“浏览文件”功能。
https://github.com/yoksel/url-encoder/ *用法：1.插入SVG代码或浏览SVG文件。
2.复制代码并使用。
3.享受！
您也可以将编码的SVG放在“接受编码”字段中，以将其解码回去。
*注意：安装扩展程序后，不要忘记将图标固定在浏览器工具栏上。
				
需要将端上传过来的svg文件解析为字符串，然后再生成jpeg格式图片，再将图片转成Base64格式进行使用首先引入如下以来。版本一定按照这个来，高版本会出现各种类丢失的问题。
再就是工具类代码
可以看到生成了base64字符串
进行转化后能够复原出图片
				
文章目录SVG 简介什么是SVGSVG有哪些优势SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG展示效果
SVG 简介
什么是SVG
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。
它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。
SVG有哪些优势
SVG 可被非常多的工具读取和修改
SVG 与JPE
				
这是由于发送请求时没有写.catch(res=>{})方法去获取有可能的错误，才报的错误
getUserRoles().then(json=>{
console.log(‘success’)
}).catch(function (err) {
console.log(err);
				
描述：在网页调试时，没有报错，去安卓端后报错，并且不发送请求，排除安卓端错误后，发现是安卓端不支持FormData.get(‘url’)的函数。
解决思路：
1.逐渐缩小范围，定位问题
2.在该功能的每一个函数前后都加上打印，看函数执行到哪里停止。
有传入参数用传入参数作为入参数，无传入参数用默认值
  getTableData = async (pageData = {}) => {
    const params = Object.assign({}, { currPage: 1, pageSize: this.state.pageSize }, this.state.searchData, pageData);
  // 浅拷贝，当pageData是非空对象，会把{ currPage: 1, pageSize: 
在线工具：
1. https://base64.guru/converter/encode/image/svg
2. https://onlinepngtools.com/convert-svg-to-base64
代码实现（Python）：
import base64
with open("image.svg", "rb") as f:
    svg_data = f.read()
base64_data = base64.b64encode(svg_data).decode("utf-8")
print(base64_data)
其中，将文件名改为对应的SVG图片文件名即可。
                Problems loading reference : Unable to load schema from : Unable to connect......
                    weixin_41817931: 
                    无效呀，咋办？
                vue中获取Error: timeout of 50ms exceeded
                    m0_72502055: 
                    我这边准备充值了，能不能帮我一下
                Problems loading reference : Unable to load schema from : Unable to connect......
                    青春无悔。。。: 
                    tsc 后又出现了
                vue获取promise中的值
                    qq_44776421: 
                    写的太好了