vue 实现拍照功能
Vue 实现拍照功能
使用HTML5的getUserMedia API
通过HTML5的getUserMedia API可以访问用户的摄像头，结合Vue实现拍照功能。
在Vue组件的<template>中添加一个视频元素和一个按钮：
<template>
<div>
<video ref="video" autoplay></video>
<button @click="capture">拍照</button>
<canvas ref="canvas"></canvas>
</div>
</template>在<script>中实现拍照逻辑：
export default {
mounted() {
this.startCamera();
},
methods: {
async startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
this.$refs.video.srcObject = stream;
} catch (err) {
console.error("无法访问摄像头:", err);
}
},
capture() {
const video = this.$refs.video;
const canvas = this.$refs.canvas;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
const imageDataUrl = canvas.toDataURL('image/png');
console.log(imageDataUrl); // 可以保存或上传
}
}
};使用第三方库vue-web-cam
vue-web-cam是一个专门为Vue设计的摄像头组件，简化了拍照功能的实现。
安装库：
npm install vue-web-cam在Vue组件中使用：
<template>
<div>
<web-cam ref="webcam" @started="onStarted" />
<button @click="capture">拍照</button>
<img :src="image" v-if="image" />
</div>
</template>
<script>
import { WebCam } from 'vue-web-cam';
export default {
components: { WebCam },
data() {
return {
image: null
};
},
methods: {
onStarted() {
console.log('摄像头已启动');
},
capture() {
this.image = this.$refs.webcam.capture();
}
}
};
</script>处理移动端兼容性
在移动设备上，可能需要额外处理横竖屏切换和权限问题。确保在getUserMedia调用时添加适当的错误处理：
async startCamera() {
const constraints = {
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
facingMode: 'user' // 前置摄像头
}
};
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
this.$refs.video.srcObject = stream;
} catch (err) {
alert(`摄像头访问被拒绝: ${err.message}`);
}
}保存或上传图片
拍照后可以将图片保存为文件或上传到服务器：
methods: {
async uploadImage(imageDataUrl) {
const blob = await fetch(imageDataUrl).then(res => res.blob());
const formData = new FormData();
formData.append('image', blob, 'photo.png');
try {
const response = await axios.post('/upload', formData);
console.log('上传成功:', response.data);
} catch (error) {
console.error('上传失败:', error);
}
}
}注意事项
- 需要在HTTPS环境或
localhost下使用getUserMedia。 - 部分浏览器可能需要用户明确授权才能访问摄像头。
- 拍照后记得释放摄像头资源：
beforeDestroy() { if (this.$refs.video.srcObject) { this.$refs.video.srcObject.getTracks().forEach(track => track.stop()); } }
