vue中通过插件实现自定义截屏功能

1、npm安装插件

npm install js-web-screen-shot --save

2、在页面组件中引入

import ScreenShort from "js-web-screen-shot";

3、示例代码

<template>
  <div>
    <button @click="btnClick()">截图</button>
  </div>
</template>
 
<script>
 
 
import ScreenShort from "js-web-screen-shot";
 
export default {
  data(){
    return{
        uploadlist:[],
        imageFilelist:[],
 
    }
  },
  methods:{
    btnClick(){
        const screenShotHandler = new ScreenShort({
            enableWebRtc: false,  //是否显示选项框
            level:99,  //层级级别
            completeCallback: this.callback,
            closeCallback: this.closeFn,
        });
 
    },
 
    callback(base64data) {
        var image = new Image();
        image.src = base64data;
        image.onload = () => {
          var canvas = this.convertImageToCanvas(image);
          var url = canvas.toDataURL("image/jpeg");
          // 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加
          this.uploadlist.push({image:url})
          for(var i=0;i<this.uploadlist.length;i++){
            if(this.uploadlist.length>=6){
              this.uploadhide=false;
            }
          }
          console.log(this.uploadlist,'push')
 
          var bytes = window.atob(url.split(",")[1]);  //通过atob将base64进行编码
          //处理异常，将ASCII码小于0的转换为大于0,进行二进制转换
          var buffer = new ArrayBuffer(bytes.length);
          var uint = new Uint8Array(buffer);  //生成一个8位数的数组
          for (var i = 0; i < bytes.length; i++) {
            uint[i] = bytes.charCodeAt(i);  //根据长度返回相对应的Unicode 编码
          }
          //Blob对象
          var imageFile= new Blob([buffer], { type: "image/jpeg" }); //type为图片的格式
 
          // 给后台返回的数组，我的项目需求是要截图多张上传给后端的，如果只上传一张直接就上传imageFile上一句就行，这个数组可以跟根据自己的需求进行编写
          this.imageFilelist.push(imageFile);
          if (this.imageFilelist != "") {
            console.log("截图成功")
            // this.$message({
            //   type: "success",
            //   message: "截图成功",
            // });
          }
      };  
    },
 
    convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
 
    closeFn(){
 
    }
  }
}
</script>