vue实现拍照功能
Vue 实现拍照功能
在 Vue 中实现拍照功能通常需要结合 HTML5 的 getUserMedia API 和 <canvas> 元素。以下是实现步骤：
引入摄像头访问权限
使用 navigator.mediaDevices.getUserMedia 获取摄像头权限，并绑定到 <video> 元素实时显示画面。
<template>
<div>
<video ref="video" autoplay></video>
<button @click="capture">拍照</button>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
export default {
data() {
return {
stream: null
};
},
methods: {
async startCamera() {
try {
this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
this.$refs.video.srcObject = this.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); // 可保存或上传
}
},
mounted() {
this.startCamera();
},
beforeDestroy() {
if (this.stream) {
this.stream.getTracks().forEach(track => track.stop());
}
}
};
</script>处理移动端兼容性
移动端需注意横竖屏适配和权限提示。可添加 CSS 确保视频和画布显示正常：
video, canvas {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}保存或上传图片
通过 canvas.toDataURL() 获取 Base64 格式的图片数据，可直接展示或通过 Ajax 上传：
// 示例：上传图片
async function uploadImage(imageDataUrl) {
const blob = await fetch(imageDataUrl).then(res => res.blob());
const formData = new FormData();
formData.append('image', blob, 'photo.png');
// 使用 axios 或其他 HTTP 库
axios.post('/api/upload', formData).then(response => {
console.log('上传成功', response);
});
}注意事项
- 确保在 HTTPS 环境或
localhost下测试，部分浏览器限制摄像头在非安全环境下的访问。 - 调用
getUserMedia时需处理用户拒绝权限的情况。 - 销毁组件时关闭摄像头流，避免资源占用。
通过以上方法，可以在 Vue 中实现基础的拍照功能，并进一步扩展为照片滤镜、裁剪等高级功能。
