在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
      }
  }
})