vue 截图功能的实现

<span @click="toImage()">导出图片</span>

 <!-- 需要截图的区域 -->
<div class="imageBox">
....
</div>

    import html2canvas from 'html2canvas'
    
    // 截图
    crossTabletoImage () {
      const canvas = document.createElement('canvas')
      const canvasBox = document.querySelector('.imageBox')
      const width = canvasBox.clientWidth
      const height = canvasBox.clientHeight
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      // canvas.width = width * 2
      // canvas.height = height * 2
      canvas.width = width
      canvas.height = height
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      const context = canvas.getContext('2d')
      // context.scale(2, 2)
      context.scale(1, 1)
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
      }
      html2canvas(canvasBox, options).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png') // 图片格式转成base64
        this.downloadImage(dataURL)
      })
    },
    // 下载图片
    downloadImage (url) {
      const a = document.createElement('a')
      a.href = url
      a.download = '图片命名'
      a.click()
    }