js将带有image标签的svg转为png、jpeg等类型的图片

前言：先聊一下svg类型的图片 正常的svg类型得图片是里面包含path和g标签的但是也有一种里面包含image标签的svg，svg里面会绘制一些图形比如由矩形绘制的svg那么里面就是这样<rect xmlns="http://www.w3.org/2000/svg" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>这是一个宽300高100的矩形如果是一些复杂的图形那么就是用path属性展示比如<path d="M787.16 512c13.62 0 24.84 11.22 24.84 24.9v250.2a25.02 25.02 0 0 1-24.84 24.9H236.84A25.02 25.02 0 0 1 212 787.16V536.9c0-13.68 11.22-24.9 24.84-24.9 13.68 0 24.9 11.22 24.9 24.9v225h500.1v-225a24.6 24.6 0 0 1 25.32-24.9zM512 212c13.02 0 23.7 10.56 23.7 23.4v296.52l85.74-84.6a23.58 23.58 0 0 1 33.66 0l3 3.6c6 9.12 5.04 21.72-3 29.64L528.86 605.18a24.24 24.24 0 0 1-33.72 0L368.9 480.56a23.52 23.52 0 0 1 0-33.24 24.24 24.24 0 0 1 33.66 0l85.68 84.6V235.4c0-12.84 10.8-23.4 23.76-23.4z"></path>今天我所遇到的是svg里面包裹image标签xlink:href="https://xxxx.jpg" x="-324.5" y="-198.5" width="649" height="397"></image>我所遇到的需求是将此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类型的图片下载到本地了