当前位置：首页 > VUE

vue实现拍照

2026-01-07 18:32:19VUE

Vue实现拍照功能

在Vue中实现拍照功能通常需要结合浏览器的MediaDevices API和Canvas元素。以下是具体实现方法：

安装依赖（可选） 如果需要更简单的封装，可以安装vue-web-cam等第三方库：

npm install vue-web-cam

原生API实现方式

请求摄像头权限通过navigator.mediaDevices.getUserMedia获取视频流：

async function startCamera() {
const stream = await navigator.mediaDevices.getUserMedia({
 video: { width: 1280, height: 720 }
});
this.$refs.videoElement.srcObject = stream;
}

在模板中添加视频和画布元素

<video ref="videoElement" autoplay></video>
<canvas ref="canvasElement" style="display:none;"></canvas>
<button @click="capturePhoto">拍照</button>

拍照功能实现


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

// 获取Base64格式图片 this.photoData = canvas.toDataURL('image/jpeg'); }


---

使用vue-web-cam库

1. 组件引入
```javascript
import { WebCam } from 'vue-web-cam';
export default {
  components: { WebCam }
}

模板使用

<web-cam ref="webcam" />
<button @click="capture">拍照</button>

拍照方法

capture() {
const imageSrc = this.$refs.webcam.capture();
this.photo = imageSrc;
}

注意事项

需在HTTPS环境或localhost下使用摄像头API
移动端需处理横竖屏适配问题
拍照后调用srcObject.getTracks().forEach(track => track.stop())释放摄像头

完整示例代码结构

vue实现拍照

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

<script>
export default {
  data() {
    return {
      photo: null
    }
  },
  methods: {
    async startCamera() {
      // 实现代码
    },
    capture() {
      // 实现代码
    }
  },
  mounted() {
    this.startCamera();
  }
}
</script>

标签: vue