在vue项目里使用js-web-screen-shot 实现截图的功能

怎么在前端项目里添加一个截图功能呢，今天我们使用js-web-screen-shot  来实现一下，超详细的代码，教你轻轻松松做截图。以下是基于vue3+ts

<template>
   <!--截图图标-->
  <svg-icon icon-class="screen" 
 style="style:display:flex;width:22px;
 height:22px;cursor:pointer;margin:0px 30px 0px 30px;" @click="jitT"/>
  <!--点击对钩后确认保存-->
    <el-dialog
      v-model="confirmDialog"
      width="40%"
      :closeOnClickModal="false"
      title="提示"
      >
      <h3 style="display:flex;justify-content:start;font-size: 18px;">
       <i class="el-icon-warning" style="margin-top: 16px;margin-right: 18px;"></i>
        请确认是否保存截图!
       </h3>
      <template #footer class="dialog-footer">
        <el-button @click="confirmDialog=false" >取 消</el-button>
        <el-button type="primary" @click="confirmUpdataName" >确 定</el-button>
      </template>
    </el-dialog>
    <!---可有可无，确认保存后用户添加图片名称-->
    <el-dialog
      v-model="nameDialog"
      :closeOnClickModal="false"
      width="40%"
      title="图片名称"
      >
      <el-form ref="nameRef" :model="nameData" label-position="left">
        <el-form-item label="图片名称:" :rules="[{required:true,message:'请输入图片名称',trigger:['blur','change']}]" prop="name">
          <el-input v-model="nameData.name" placeholder="请输入图片名称" style="width:60%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer class="dialog-footer">
        <el-button @click="nameDialog=false" >取 消</el-button>
        <el-button type="primary" @click="confirmSave" >确 定</el-button>
      </template>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import  { uploadOssApi } from '../api'
import { Message } from '_c/Message'
import ScreenShort from 'js-web-screen-shot'
export default  defineComponent({
  emits:['imageData'],
  setup(props, {emit}) {
    const nameRef = ref()
    const confirmDialog = ref<Boolean>(false)
    const nameDialog = ref<Boolean>(false)
    const imgUrl = ref()
    const nameData = ref({name:''})
    //截图事件
    function jitT () {
      const screenShotHandler = new ScreenShort({
        enableWebRtc: false, // 是否显示选项框
        level: 99, // 层级级别
        completeCallback: callback, //确认回调
        closeCallback: closeFn  //取消回调
      } as any)
    }
    //确认回调
    const callback = (val:any) => {
      confirmDialog.value = true
      imgUrl.value = base64ToBlob(val.base64)  
    }
    //取消回调
     const closeFn = (base64:any) => {
       console.log(base64)
     }
    //转为base64好上传oss
    function base64ToBlob(code:any) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    }
      // 上传图片到oss
      async function confirmSave() {
        const formWrap = unref(nameRef) 
        formWrap.validate(async(valid:any) => {
          if (valid) {
            const form = new FormData()
            console.log('form',form);
            form.append('file', imgUrl.value, `${nameData.value.name}.png`)
            form.append('businessType', 'questionScreen')
            const res:any = await uploadOssApi({
              data: form
            })
            if(res?.code === '200') {
              const data = {fileId: res.data, fileName: `${nameData.value.name}.png`}
              emit('imageData',data)
              nameDialog.value = false
              nameData.value.name = ''
            } else {
              Message.error(res.msg)
            }
          } else {
            console.log('error submit!!')
            return false
          } 
        })
        }
      function confirmUpdataName() {
        confirmDialog.value = false
        nameDialog.value = true
      }
      return {
        jitT,
        confirmDialog,
        nameDialog,
        confirmUpdataName,
        confirmSave,
        nameRef,
        nameData
      }
  }
})
</script>