vue.js实现拍照
Vue.js 实现拍照功能
在 Vue.js 中实现拍照功能通常需要结合浏览器的媒体 API（如 getUserMedia）和 Canvas 元素。以下是实现步骤：
准备工作
确保项目已安装 Vue.js。如果是新项目，可以通过以下命令创建：
npm init vue@latest实现步骤
在 Vue 组件中，通过 navigator.mediaDevices.getUserMedia 访问摄像头：
<template>
<div>
<video ref="video" autoplay></video>
<button @click="capture">拍照</button>
<canvas ref="canvas"></canvas>
<img :src="photo" v-if="photo" />
</div>
</template>
<script>
export default {
data() {
return {
photo: null,
stream: null
}
},
async mounted() {
try {
this.stream = await navigator.mediaDevices.getUserMedia({ video: true })
this.$refs.video.srcObject = this.stream
} catch (err) {
console.error('摄像头访问失败:', err)
}
},
methods: {
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)
this.photo = canvas.toDataURL('image/png')
}
},
beforeUnmount() {
if (this.stream) {
this.stream.getTracks().forEach(track => track.stop())
}
}
}
</script>注意事项
- 该功能需要在 HTTPS 环境或 localhost 下运行，否则浏览器可能会阻止摄像头访问
- 首次使用时浏览器会请求摄像头权限，需要用户授权
- 拍照后可以通过
canvas.toDataURL()获取 base64 格式的图片数据 - 组件销毁时需要手动关闭摄像头流，避免资源泄漏
扩展功能
如果需要保存或上传照片，可以添加以下方法：
methods: {
savePhoto() {
const link = document.createElement('a')
link.download = 'photo.png'
link.href = this.photo
link.click()
},
async uploadPhoto() {
const blob = await fetch(this.photo).then(r => r.blob())
const formData = new FormData()
formData.append('photo', blob, 'photo.png')
// 发送到服务器
}
}移动端适配
在移动设备上，可能需要添加以下样式确保正确显示：
video, canvas {
max-width: 100%;
height: auto;
}通过以上方法，可以在 Vue.js 应用中实现基本的拍照功能，并根据需求进行扩展。
