背景： 需要对页面指定dom元素进行截图，并以file文件上传至服务器。

实现

1. dom元素进行截图实现

利用npm包dom-to-image进行截图实现

首先进行dom元素选择， 例：

const node = document.querySelector('.tableNode')

利用dom-to-image中的toJpeg进行截图实现，

import domtoimage from 'dom-to-image'

domtoimage

    .toJpeg(node.parentNode)

    .then(dataUrl => {

     // dataUrl 是base64图片

    })

    .catch(error => {

      console.error('oops, something went wrong!', error)

    })

}

domtoimage.toJpeg是对选择的dom元素进行截图操作，然后返回base64图片，所以，需要对base64转成file类型，然后上传至服务器

2. base64转成file类型

首先将base64转成blob，在将blob转成file类型

function dataURLtoBlob(dataurl){

  const arr = dataurl.split(',')

  const mime = arr[0].match(/:(.*?);/)[1]

  const bstr = atob(arr[1])

  let n = bstr.length

  const u8arr = new Uint8Array(n)

  while (n--) {

    u8arr[n] = bstr.charCodeAt(n)

  }

  return new Blob([u8arr], {type: mime})

}

function blobToFile(theBlob, fileName){

  theBlob.lastModifiedDate = new Date()

  theBlob.name = fileName

  return theBlob

}

let url = dataURLtoBlob(dataUrl)

let finalFile = blobToFile(blob, 'test')

finalFile就是file类型的图片