js将带有image标签的svg转为png、jpeg等类型的图片进行下载或将svg类型的图片下载到本地无法显示

前言：先聊一下svg类型的图片 正常的svg类型得图片是里面包含path和g标签的但是也有一种里面包含image标签的svg，svg里面会绘制一些图形比如由矩形绘制的svg那么里面就是这样这是一个宽300高100的矩形如果是一些复杂的图形那么就是用path属性展示比如今天我所遇到的是svg里面包裹image标签xlink:href="https://xxxx.jpg" x="-324.5" y="-198.5" width="649" height="397">我所遇到的需求是将此svg转换为普通图片类型并将其下载到本地，下面开始讲解解决过程

我百度很多文章屡试不爽因为我的svg里面的image标签的href是在线图片地址，所以我尝试很多次都以失败告终最终经过多次尝试将其解决

1. 首先要将svg标签的href的值由http...或者https...转换为base64格式的才可以

 const getBase64Image = (img: any) => {
    const canvas= document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx: any = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, img.width, img.height)
    const dataURL = canvas.toDataURL('image/png') // 可选其他值 image/jpeg
    return dataURL
  }

  const main = (src: string, cb: any) => {
    const image = new Image()
    image.src = `${src}?v=${Math.random()}` // 处理缓存
    image.crossOrigin = '*' // 支持跨域图片
    image.onload = function () {
      const base64 = getBase64Image(image)
      if (cb) {
        cb(base64)
      }
    }
  }

这两个函数是将其项目图片地址转换为base64的工具

2. 调用

main('你要转换的项目图片地址', function (base64: string) {
      const newSvg = node.replace(oldUrl, base64) // oldUrl你转换之前的项目图片地址 base64是已经转换成功的图片地址
      const image = new Image()
      image.setAttribute('crossOrigin', 'anonymous') // 允许跨域
      image.src = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(newSvg)))}` // 给图片对象写入base64编码的svg流
      const canvas = document.createElement('canvas') // 准备空画布
      canvas.width = 1500 // 设置宽度
      canvas.height = 800 // 设置高度

      image.onload = function () {
        const context: any = canvas.getContext('2d')
        context.drawImage(image, 0, 0)
        const a = document.createElement('a')
        a.download = `你要导出图片的名字`
        a.href = canvas.toDataURL(`image/png`)
        a.click()
      }
    })

最终就很完美的将svg类型的图片下载到本地了