废话不多说，直接上代码
bash
<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>如果要进行上传的话，下面的操作
bash
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}`;
}
},浏览器直接获取系统剪切板数据
bash
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);
}
},详细代码(当前的需求是在一个页面获取到当前帧，然后在另一个页面获取剪切板并粘贴)
bash
<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>