vue使用插件js-web-screen-shot完成局部截图并保存上传给后端

使用 js-web-screen-shot 插件完成屏幕局部截图带截图工具栏，然后将截取的图片上传给后端

第一步、先下载js-web-screen-shot插件

yarn add js-web-screen-shot
# or
npm install js-web-screen-shot --save

第二步、在vue页面引入import插件

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

第三步、在点击截图监听事件中实例化插件

var timer=setTimeout(()=>{
        const screenShotHandler = new ScreenShort({
        enableWebRtc: false,  //是否显示选项框
        level:99,  //层级级别
        completeCallback: this.callback,
        closeCallback: this.closeFn,
     );
 },0)

这个时间值可以不要，我是new时间没有触发才加的时间值，这个根据自己项目问题添加，如果还想使用其他参数和方法，请参考js-web-screen-shot网页

js-web-screen-shot - npm

第四步、截图成功要进行上传，将图片传递给后端，调用插件中的成功方法callback()上传图片,

记得要在html页面的body中引入canvas

   

    /**
     * 根据图片生成画布
     */
    convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
    /**
     * 生成图片
     * 截图确认按钮回调函数
     */
    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=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 != "") {
            this.$message({
              type: "success",
              message: "截图成功",
            });
          }
      };  
    },

第五步、就是通过axios将返回给后端

// 生成图片唯一名，要保证每张图片的名字唯一性所以才加上guid来保证图片的唯一性
function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}
//请求格式是from-data格式
export function ProblemAddStatistic(config) {
    let formData=new FormData();
    for(var i=0;i

运行效果图：

记得三连击！！！！