vue如何截屏下载图片

这里我采用canvas进行截图下载图片

<template>
 <div>
 
        <div class="poster-box-top" ref="canvas"> </div>
  
 
            <span @click="captureScreen">保存本地</span>

  </div>
  <script>
  import html2canvas from 'html2canvas'
  export default {
    data() {
    return {
      screenshot: null, // 存储截屏结果的图片
    }
  }
    methods: {
    captureScreen() {
      const captureElement = this.$refs.canvas // 获取你想要截屏的元素
      html2canvas(captureElement,{ useCORS: true }).then((canvas) => {
        // 将画布转换为图片URL
        this.screenshot = canvas.toDataURL('image/png')
        const link = document.createElement('a')
        link.href = this.screenshot
        link.download = 'image.png'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    }
    }
  </script>
</template>