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

怎么在前端项目里添加一个截图功能呢，今天我们使用js-web-screen-shot  来实现一下，超详细的代码，教你轻轻松松做截图。以下是基于vue3+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(false)    const nameDialog = ref(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  {          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      }  }})