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

本文链接：https://www.kjpai.cn/news/2024-04-16/159402.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！