【svg.js】 svg转canvas

在svg绘制好的图表想要使用html2canvas绘制图形时 会遇到很多bug 所以最好先转换为canvas获取base64图片连接

代码如下：

async generatePng(){
    
    
      let maxEventAge = 25
      if (this.dataList.length > 0 && this.dataList[this.dataList.length-1].age >= 25) {
    
    
        maxEventAge = this.dataList[this.dataList.length-1].age;
      }
      let D_age_width = this.D_age_width;
      let D_padding_left = this.D_padding_left;
      let D_w = D_age_width * (Math.round(maxEventAge/5) +1) + D_padding_left * 2; // 画布宽 // 最大年龄 + 5岁
      let D_h = this.D_h;

       
      // this.draw.clear();
      var list = SVG.find('.all-drawline-group');
      list.timeline().finish() // 立即结束动画  否则获取到的svg 为动画执行时的快照
      this.draw.size(D_w, D_h);
      // this.draw.viewbox(0, 80, D_w, D_h - 80)
      // this.initSvg(false, true);
      SVG.find('.y-line-group').hide();
      


      var svg = document.getElementById('svg');
      const hasEventImgSvgData = new XMLSerializer().serializeToString(svg);

      SVG.find('.all-drawline-group-tips').hide();
      const noEventImgSvgData = new XMLSerializer().serializeToString(svg);

      // 复原
      this.draw.size(D_age_width * (Math.round(125/5) +1) + D_padding_left * 2, D_h);
      SVG.find('.y-line-group').show();
      SVG.find('.all-drawline-group-tips').show();

      let _hasEventImg = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(hasEventImgSvgData)));
      let _noEventImg = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(noEventImgSvgData)));
      let _svg2canvas = (src, width, height, resolve) => {
    
    
        const img = new Image();
        img.src = src;
        img.crossOrigin = 'anonymous';
        img.onload = async() => {
    
    
            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
            resolve(canvas.toDataURL())
        };
      }
      let _p1 = new Promise(resolve => {
    
    
        _svg2canvas(_hasEventImg, D_w, D_h, resolve)
      })
      let _p2 = new Promise(resolve => {
    
    
        _svg2canvas(_noEventImg, D_w, D_h, resolve)
      })
      let _res = await Promise.all([_p1, _p2]);
      return Promise.resolve({
    
    
        hasEventImg: _res[0],
        noEventImg:  _res[1],
        isLong: this.dataList.length > 1 && this.dataList[this.dataList.length - 1].age > 25,
        width: D_w / ((D_h - (D_h - 350)) / 240)
      })
    },

如有参考请自行过滤业务代码。