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