当前位置：首页 > VUE

vue 实现拍照功能

2026-03-30 09:39:11VUE

实现拍照功能的基本思路

在Vue中实现拍照功能通常需要借助浏览器的getUserMedia API访问摄像头，并将视频流渲染到页面。通过canvas元素捕获当前帧并转换为图片数据。

安装依赖（可选）

若需简化开发，可安装vue-web-cam等第三方库：

vue 实现拍照功能

npm install vue-web-cam

原生API实现步骤

请求摄像头权限

通过navigator.mediaDevices.getUserMedia获取视频流：

vue 实现拍照功能

async function startCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    this.$refs.videoElement.srcObject = stream;
  } catch (err) {
    console.error("摄像头访问失败:", err);
  }
}

视频渲染

在模板中添加视频元素：

<video ref="videoElement" autoplay playsinline></video>

拍照并保存

使用canvas捕获当前视频帧：

function capturePhoto() {
  const video = this.$refs.videoElement;
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);

  // 转换为Base64或Blob
  const imageData = canvas.toDataURL('image/png');
  this.savePhoto(imageData); // 自定义保存逻辑
}

使用vue-web-cam库

组件注册

import Vue from 'vue';
import WebCam from 'vue-web-cam';

Vue.component('web-cam', WebCam);

模板示例

<web-cam ref="webcam" @started="onStarted" @stopped="onStopped" />
<button @click="capture">拍照</button>
<img :src="imageData" v-if="imageData" />

拍照方法

methods: {
  capture() {
    const imageData = this.$refs.webcam.capture();
    this.imageData = imageData;
  }
}

注意事项

需在HTTPS环境或localhost下运行，部分浏览器禁止非安全环境访问摄像头
移动端需添加playsinline属性防止全屏播放

拍照后需手动关闭视频流以避免资源占用：

function stopCamera() {
const stream = this.$refs.videoElement.srcObject;
stream.getTracks().forEach(track => track.stop());
}

完整组件示例

<template>
  <div>
    <video ref="video" autoplay playsinline></video>
    <button @click="capture">拍照</button>
    <img :src="photoData" v-if="photoData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoData: null
    };
  },
  mounted() {
    this.startCamera();
  },
  methods: {
    async startCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        this.$refs.video.srcObject = stream;
      } catch (err) {
        alert(`摄像头错误: ${err.message}`);
      }
    },
    capture() {
      const video = this.$refs.video;
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      this.photoData = canvas.toDataURL('image/jpeg');
    }
  },
  beforeDestroy() {
    const stream = this.$refs.video?.srcObject;
    stream?.getTracks().forEach(track => track.stop());
  }
};
</script>