svg格式转为png格式并下载

//svg转为base64格式的svg
(url为<svg xml:space="preserve" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h18v18H0V0z" fill="none"/><path d="M3.6 11.3v3.1h3.1V16H2v-4.7h1.6zm12.4 0V16h-4.7v-1.6h3.1v-3.1H16zM6.7 2v1.6H3.6v3.1H2V2h4.7zM16 2v4.7h-1.6V3.6h-3.1V2H16zM9 4.5c2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5-4.5-2-4.5-4.5 2-4.5 4.5-4.5zm0 1.3C7.2 5.8 5.8 7.2 5.8 9s1.4 3.2 3.2 3.2 3.2-1.4 3.2-3.2c0-1.8-1.4-3.2-3.2-3.2zM9 7c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2c0-.2 0-.4.1-.6.2.5.8.7 1.3.5s.7-.8.5-1.3c-.1-.2-.3-.4-.5-.5.2-.1.4-.1.6-.1z"/></svg>)
const imgUrl = (url: string) => {
  return 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(url)))
}


 //获取png格式的base64（id为获取图片宽高,img为图片）
const getImage=(img:any,id:any)=>{  
  const canvas = document.createElement('canvas');
    canvas.width = Number(document.getElementById(id)?.style.width.slice(0, -2))||30;  //设置好 宽高  不然图片 不完整
    canvas.height = Number(document.getElementById(id)?.style.height.slice(0, -2))||30;
    const context = canvas.getContext('2d');
    context.fillStyle = '#fff';//设置为底色
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.drawImage(img, 0, 0);    
    let ImgBase64 = canvas.toDataURL('image/png');
    return ImgBase64
}


//base64转为blob
const base64ToBlob = (code:any) => {
  var arr = code.split(',')
  // 图片格式
  var mime = arr[0].match(/:(.*?);/)[1]
  // 获取，之后的base64的编码
  var bstr = window.atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}


//下载png
const downPng = (url: any, name: string, id: any) => {
  const img = new Image(); // 创建图片容器
  img.src = imgUrl(url); //imageBase64 为svg+xml的Base64 文件流
  img.onload = () => {
    var href = window.URL.createObjectURL(base64ToBlob(getImage(img, `wrap_${id}`)));
    var a = document.createElement('a');
    a.href = href;
    a.download = `${name}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(href);
  }
}