1.直接将svg转为png并下载

export const covertSVG2Image = (node, name, width, height, type = 'png') => {
  const serializer = new XMLSerializer()
  const source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)
  const image = new Image()
  image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
  const canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  const context = canvas.getContext('2d')
  context.fillStyle = '#fff'
  context.fillRect(0, 0, 10000, 10000)
  image.onload = function () {
    context.drawImage(image, 0, 0)
    const a = document.createElement('a')
    a.download = `${name}.${type}`
    a.href = canvas.toDataURL(`image/${type}`)
    a.click()
  }
}

2.利用html2canvas将html先转canvas再转png并下载（需要先安装html2canvas）

export const html2Image = (ele, name) => {
  html2canvas(ele).then(canvas => {
    const dataURL = canvas.toDataURL('image/png')
    if (dataURL !== '') {
      const blob = dataURLToBlob(canvas.toDataURL('image/png'))
      const a = document.createElement('a')
      a.style.display = 'none'
      a.setAttribute('href', URL.createObjectURL(blob))
      a.setAttribute('download', name + '.png')
      document.body.appendChild(a)
      a.click()
      URL.revokeObjectURL(blob)
      document.body.removeChild(a)
    }
  })
}

// base64 转 blob
export const dataURLToBlob = (dataurl) => {
  var arr = dataurl.split(',')
  var mime = arr[0].match(/:(.*?);/)[1]
  var bstr = 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 })
}

3.利用domtoimage将html直接转png并下载（需要先安装domtoimage）

export const dom2Image = (ele, name) => {
  domtoimage.toPng(ele).then((dataURL) => {
    if (dataURL) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.setAttribute('href', dataURL)
      a.setAttribute('download', name + '.png')
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }).catch(function (error) {
    console.error('生成失败', error)
  })
}

4.将文件地址（base64格式）转化为文件

export const dataURLtoFile = (dataURL, fileName) => {
  var arr = dataURL.split(',')
  var mime = arr[0].match(/:(.*?);/)[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], fileName + '.png', { type: mime })
}