vue中实现拍照
使用HTML5的getUserMedia API
在Vue中实现拍照功能可以通过HTML5的getUserMedia API访问摄像头。需要在组件的mounted钩子中初始化摄像头，并提供一个按钮触发拍照动作。
<template>
<div>
<video ref="video" autoplay></video>
<button @click="capture">拍照</button>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
export default {
methods: {
async startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
this.$refs.video.srcObject = stream;
} catch (error) {
console.error('摄像头访问失败:', error);
}
},
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 imageData = canvas.toDataURL('image/png');
console.log(imageData); // 可以保存或上传
}
},
mounted() {
this.startCamera();
}
};
</script>使用第三方库vue-web-cam
vue-web-cam是一个专为Vue设计的摄像头组件，简化了拍照流程。安装后可以直接在模板中使用。
npm install vue-web-cam<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: {
capture() {
this.image = this.$refs.webcam.capture();
},
onStarted() {
console.log('摄像头已启动');
}
}
};
</script>处理移动端兼容性
移动端可能需要额外权限处理。在startCamera方法中增加对iOS和Android的适配逻辑。
async startCamera() {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' } // 优先使用后置摄像头
});
this.$refs.video.srcObject = stream;
} catch (error) {
alert('请在浏览器设置中允许摄像头权限');
}
} else {
alert('您的设备不支持摄像头访问');
}
}保存或上传图片
拍照后可以通过Canvas生成Base64数据，转换为Blob后上传到服务器。
async uploadImage() {
const canvas = this.$refs.canvas;
const blob = await new Promise(resolve =>
canvas.toBlob(resolve, 'image/jpeg', 0.9)
);
const formData = new FormData();
formData.append('image', blob, 'photo.jpg');
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
console.log('上传成功:', await response.json());
} catch (error) {
console.error('上传失败:', error);
}
}注意事项
- 需要在HTTPS环境或localhost下使用
getUserMediaAPI - 部分浏览器可能需要用户手动触发摄像头权限请求
- 拍照后及时释放摄像头资源以避免内存泄漏
beforeDestroy() {
const stream = this.$refs.video.srcObject;
if (stream) {
stream.getTracks().forEach(track => track.stop());
}
}
