vue3将绘制好的页面保存为图片并同时上传到服务器

 最近项目中有一个生成特定样式的图片并留存记录的需求，遂记录一手实现方式。

一、安装依赖

npm i html2canvas

二、页面引入依赖

import html2canvas from 'html2canvas'

import axios from 'axios'

三、实现

 代码如下：

    // 生成图片并保存
    const download = () => {
      let canvasID = proxy.$refs.offerPrice2 // 获取要生成图片的页面元素
      html2canvas(canvasID, {
        scale: 6, //数值越大生成的图片越清晰
        backgroundColor: null //解决生成的图片有白边
      }).then((canvas) => {
        let dataURL = canvas.toDataURL('image/png')
        uploadFile(dataURL)
        saveFile(dataURL, '图片名称')
      })
    }
    // 保存图片
    const saveFile = (data: string, fileName: string) => {
      let saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') as any
      saveLink.href = data
      saveLink.download = fileName
      let event = document.createEvent('MouseEvents')
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
      saveLink.dispatchEvent(event)
    }
    // 上传图片到服务器
    const uploadFile = async (data: string) => {
      let arr = data.split(',') as any,
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      let obj = new Blob([u8arr], { type: mime })
      let fd = new FormData()
      fd.append('file', obj, '图片名称.png')
      await axios
        .post('上传图片的接口地址', fd, {
          // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
          headers: {
            // 表示上传的是文件,而不是普通的表单数据
            'Content-Type': 'multipart/form-data',
            Authorization: localStorage.getItem('token')
          }
        })
        .then((res: any) => {
          // 上传图片接口返回的数据
        })
    }