废话不多说，直接上代码

<template><div class="index"><button @click="getImage">截取</button><video id="myVideo" width="320" height="240" src="../assets/a.mp4" controls></video><img id="capturedImage" alt="Captured Image" style="display: none;"></div>
</template><script>
export default {data() {return {};},methods: {getImage() {const video = document.getElementById("myVideo");const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");// 设置canvas的宽度和高度与视频相同canvas.width = video.videoWidth;canvas.height = video.videoHeight;// 将当前帧绘制到canvas上ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 将canvas内容转换为Blobcanvas.toBlob(async (blob) => {try {// 创建一个包含Blob的DataTransfer对象const data = new ClipboardItem({ "image/png": blob });await navigator.clipboard.write([data]);// alert("图像已复制到剪切板");// 自动粘贴到页面上this.pasteImage(blob);} catch (err) {console.error("无法复制图像到剪切板: ", err);}}, "image/png");},pasteImage(blob) {this.capturedBlob = blob;const imgElement = document.getElementById("capturedImage");const imageUrl = URL.createObjectURL(blob);imgElement.src = imageUrl;imgElement.style.display = "block";},},
};
</script><style lang="scss" scoped>
</style>

如果要进行上传的话，下面的操作

async Update() {// console.log(this.capturedBlob);let capturedFile = new File([this.capturedBlob],"captured_image.png",{ type: "image/png" });const formData = new FormData();formData.append("file", capturedFile, "captured_image.png");try {const response = await axios.post("updata///xxxxxx",//上传接口地址formData,{headers: {"Content-Type": "multipart/form-data",},});console.log(response);} catch (err) {console.error("上传文件时出错: ", err);this.uploadStatus = `文件上传失败: ${err.message}`;}},

浏览器直接获取系统剪切板数据

 async getImageFromClipboard() {try {// 不能直接进行粘贴,就算是已经在剪切板里面了,自动粘贴还是要获取权限信息// 请求权限const permissions = await navigator.permissions.query({name: "clipboard-read",});if (permissions.state === "granted" ||permissions.state === "prompt") {// 读取剪切板中的图像数据const items = await navigator.clipboard.read();for (const item of items) {if (item.types.includes("image/png")) {const blob = await item.getType("image/png");console.log(blob);this.pasteImage(blob);break;}}} else {alert("权限被拒绝，无法读取剪切板内容");}} catch (err) {console.error("无法读取剪切板内容: ", err);}},

详细代码(当前的需求是在一个页面获取到当前帧，然后在另一个页面获取剪切板并粘贴)

<template><div class="index"><img id="capturedImage" alt="Captured Image" style="display: none;width: 200px;height: 200px;"><button @click="Update">上传</button></div>
</template><script>
import axios from "axios";
export default {data() {return {capturedBlob: null,};},created() {this.getImageFromClipboard();},methods: {async getImageFromClipboard() {try {// 不能直接进行粘贴,就算是已经在剪切板里面了,自动粘贴还是要获取权限信息// 请求权限const permissions = await navigator.permissions.query({name: "clipboard-read",});if (permissions.state === "granted" ||permissions.state === "prompt") {// 读取剪切板中的图像数据const items = await navigator.clipboard.read();for (const item of items) {if (item.types.includes("image/png")) {const blob = await item.getType("image/png");console.log(blob);this.pasteImage(blob);break;}}} else {alert("权限被拒绝，无法读取剪切板内容");}} catch (err) {console.error("无法读取剪切板内容: ", err);}},pasteImage(blob) {this.capturedBlob = blob;const imgElement = document.getElementById("capturedImage");const imageUrl = URL.createObjectURL(blob);imgElement.src = imageUrl;imgElement.style.display = "block";},async Update() {// console.log(this.capturedBlob);let capturedFile = new File([this.capturedBlob],"captured_image.png",{ type: "image/png" });const formData = new FormData();formData.append("file", capturedFile, "captured_image.png");try {const response = await axios.post("xxxxxxxxxxxxxxxxxxxxxx",formData,{headers: {"Content-Type": "multipart/form-data",},});console.log(response);} catch (err) {console.error("上传文件时出错: ", err);this.uploadStatus = `文件上传失败: ${err.message}`;}},},
};
</script><style lang="scss" scoped>
</style>