浏览器点击视频裁剪当前帧，然后粘贴到页面

废话不多说，直接上代码

<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内容转换为Blob
            canvas.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>