svg代码转base64代码

转换页面上的svg代码

svgBase64(): void {
     // 找到页面上面的svg元素
     const svg = document.getElementById('svg');
     // 将整个 document 对象序列化为一个 XML 字符串
     const s = new XMLSerializer().serializeToString(svg);
     // 通过window.btoa() 方法用于创建一个 base-64 编码的字符串
     const img = `data:image/svg+xml;base64,${window.btoa(s)}`;
     // 将转换后的 base64 代码绑定在页面上
     this.myImg = img;
 }

转换后台返回的的svg

this.workflowService.getProcessInstanceSvgById(this.processInstanceId).subscribe(res => {
    this.myImg = `data:image/svg+xml;base64,${window.btoa(res)}`;
});

---

扩展

 const myImg = document.getElementById('myImg'); // 获取Img
 // #### Canvas 转 Base64
 function canvasBase64() {
   const canvas = document.getElementById('myCanvas');
   const ImgBase64 = canvas.toDataURL('image/png');
   console.log(ImgBase64, 'Canvas 转 Base64');
   myImg.src = ImgBase64;
 }
 // #### Svg 转 Base64
 function svgBase64() {
   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
 function svgPng() {
   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;
   }
 }