Herramienta de captura de pantalla integrada en proyectos de PC

Código:

<template>
  <div class="hello">
      <img src="../assets/logo.png" ref="image">
      <button @click="screenshot">开始截图</button>
      <hr>
      <div class="img" id="img"></div>
  </div>
</template>

<script>
import kscreenshot from 'kscreenshot';  // https://gitee.com/kejiacheng/kscreenshot/
import {Message} from 'element-ui';
export default {
    name: 'HelloWorld',
    data(){
        return{
            screenshotBase64:'', // 截图获得的base64
            kscreenshot:{}, // 实例
        }
    },
    mounted() {
        this.createKscreenshot()
    },
    methods:{
        // 初始化创建实例
        createKscreenshot(){
            this.kscreenshot = new kscreenshot({
                key: 65, // 截图触发按键（例：65时则同时按下shit + A则触发截图）
                needDownload: false, // 是否下载截图后的图片
                immediately: false, // 是否立即开启截图
                toolShow:{
                    complete:true,	// 控制确认按键显示
                    quit:true,	// 控制退出按键显示
                    back:true, // 控制后退按键显示
                    arrow:true,	// 控制箭头按键显示
                    drawLine:true,  // 控制线条按键显示
                    rect:true,  //	控制矩形按键显示
                    ellipse:true,  //	控制椭圆按键显示
                    text:true,  //	控制文字按键显示
                    color:true,  //	控制颜色版按键显示
                }, // 工具栏各个工具显示
                endCB(e) { //截图成功回调 e是base64编码
                    this.screenshotBase64 = e;
                    // 创建图片元素并追加至id为img的元素内部
                    let img = new Image();
                    img.src = this.screenshotBase64;
                    document.getElementById('img').appendChild(img);
                },
                cancelCB(e) { //截图失败回调
                    Message.error('截图失败！');
                }
            })
        },
        // 开始截图操作
        screenshot(){
            // endScreenShot()	结束截图
            // startScreenShot()  开启截图
            this.kscreenshot.startScreenShot()
        }
    }
}
</script>

<style scoped lang="scss">
.hello{
  .img{
    border: 2px solid #8def82;
    padding: 10px;
  }
}
</style>

Ejecute el ejemplo: