vue3实现抓拍并上传-拓冰企业网站定制

<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>

资讯详情

vue3实现抓拍并上传