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;
  
  // 绘制当前帧到canvas
  ctx.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>