Implement html2canvas based on Vue to realize one-click screenshot

1. download dependencies

npm install html2canvas --save

2. full code

<template>
  <div class="home">
    <div class="inv_box" ref="imageTofile">
      QQQQQQQQQQ
    </div>
    <el-button @click="screenshot" >截图</el-button>
  </div>
</template>
<script>
import html2canvas from 'html2canvas';

export default {
      
      
  name: "home",
  data() {
      
      
    return {
      
      
      ezvizPlay: null,
    };
  },
  components: {
      
      },
  props: {
      
      },
  watch: {
      
      },
  computed: {
      
      },
  mounted() {
      
      },
  methods: {
      
      
    // 截图
    screenshot(){
      
      
      // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas")
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      // video是给截图范围内的父级元素自定义的ref名称
      let canvasBox = this.$refs.video
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width)
      const height = parseInt(window.getComputedStyle(canvasBox).height)
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2
      canvas.height = height * 2
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      const context = canvas.getContext("2d");
      context.scale(2, 2);
      const options = {
      
      
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
      }
      html2canvas(canvasBox, options).then((canvas) => {
      
      
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png")
        this.downloadImage(dataURL,'baocun')
      })
    },
    downloadImage(url,name) {
      
      
      // 如果是在网页中可以直接创建一个 a 标签直接下载 
      let a = document.createElement('a')
      a.href = url
      a.download = name
      a.click()
    },
  }
};
</script>
<style lang="scss" scoped>
</style>

3. renderings