<template><video ref="videoRef" autoplay playsinline></video><canvas ref="canvasRef" class="hidden"></canvas><button @click="capture">抓拍</button> </template><style> .hidden { display: none; } </style> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue';const videoRef = ref(null); const canvasRef = ref(null); let stream = null;// 初始化摄像头 const initCamera = async () => {try {stream = await navigator.mediaDevices.getUserMedia({ video: true });videoRef.value.srcObject = stream;} catch (error) {console.error('摄像头访问失败:', error);} };// 抓拍并存储 const capture = () => {const video = videoRef.value;const canvas = canvasRef.value;const ctx = canvas.getContext('2d');// 设置canvas尺寸与视频一致canvas.width = video.videoWidth;canvas.height = video.videoHeight;// 绘制当前帧到canvasctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 转为base64并存储const base64 = canvas.toDataURL('image/png');localStorage.setItem('userImg', base64); };// 清理资源 const cleanup = () => {if (stream) {stream.getTracks().forEach(track => track.stop());stream = null;} };
//图片上传函数
function uploadimg() {
// 提取base64数据部分
const base64Data = localStorage.userImg.split(',')[1];
// 创建FormData对象
// const formData = new FormData();
// formData.append('base64Image', base64Data);
// 也可以直接发送base64字符串
const data = { base64Image: base64Data };
// 发送到服务器
fetch(`http://192.168.2.44:18758/imageUpload/zhuapai`, {
method: 'POST',
// body: formData,
// 如果使用JSON方式
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log('上传成功:', data);
img_url = data.data.fullUrl
let img0 = document.getElementById("j_img");
img0.src = "";
})
.catch(error => {
console.error('上传失败:', error);
});
}
onMounted(initCamera); onBeforeUnmount(cleanup); </script>