添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
let that = this;
let chart = document.getElementById('chart');
let svghtml = chart.innerHTML;
// let svg = document.querySelector('svg');
// let svghtml = svg.outerHTML;
// let svghtml = new XMLSerializer().serializeToString(svg);
let img = new Image();
let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`;//
// let imgsrc = `data:image/svg+xml;utf,${svghtml}`;//
img.onload = function () {
  let canvas = document.createElement('canvas');
  canvas.width = chart.offsetWidth;
  canvas.height = chart.offsetHeight;
  let context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  let url = canvas.toDataURL('image/png');
  let a = document.createElement('a');
  // a.href = './assets/imgs/company.png';
  a.href = url;
  a.download = that.corpname + '融资图谱.png';
  a.click();
注意点:svg转base64地址的方法有下面两种
let chart
= document.getElementById('chart');   let svghtml = chart.innerHTML;   let imgsrc = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svghtml)))}`; 2  let svg = document.querySelector('svg');   let svghtml = svg.outerHTML;   let svghtml = new XMLSerializer().serializeToString(svg);

遇到的第一个坑:

当你使用第一种转base64方法的时候 
svg标签要 加上xmlns http://www.w3.org/2000/svg的属性 要不然image会一直进error的方法
如果svg中 包含了image 则也需要加上 属性 xmlns http://www.we.org/1999/xlink  

遇到的第二个坑:

 但是如果你的svg中包含了image 标签 ,千万要注意 里面的src最好写上 
 要引用的图片的base64 地址,否则如果直接引用项目图片地址的话,最后下载的图片 原来svg中的image不会出现在图片中
附上image转base64的方法
_img2base64 = (img) => {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;

遇到的坑3:

一定是在img onload方法中 进行base64转化,
// let img = new Image();
      // img.src = './assets/imgs/company.png';
      // img.onload = function () {
      //   img.width = 80;
      //   img.height = 80;
      //   document.body.appendChild(img)
      //   let url1 = that._img2base64(img);
    //  将获取的base64复制给svg的image属性 

 ok 完事,希望能解决你的困惑

有问题 评论见