怎么在前端项目里添加一个截图功能呢，今天我们使用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>