vue实现拍照

Vue实现拍照功能

在Vue中实现拍照功能通常需要结合HTML5的<input type="file">元素、<video>和<canvas>元素来实现。以下是具体实现方法：

使用摄像头拍照

<template>
  <div>
    <video ref="video" width="400" height="300" autoplay></video>
    <button @click="takePhoto">拍照</button>
    <canvas ref="canvas" width="400" height="300"></canvas>
    <img :src="photoDataUrl" v-if="photoDataUrl" width="400" height="300"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoDataUrl: null
    }
  },
  mounted() {
    this.initCamera()
  },
  methods: {
    async initCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true })
        this.$refs.video.srcObject = stream
      } catch (err) {
        console.error('摄像头访问失败:', err)
      }
    },
    takePhoto() {
      const video = this.$refs.video
      const canvas = this.$refs.canvas
      const context = canvas.getContext('2d')

      context.drawImage(video, 0, 0, canvas.width, canvas.height)
      this.photoDataUrl = canvas.toDataURL('image/png')
    }
  }
}
</script>

从文件选择拍照

<template>
  <div>
    <input type="file" accept="image/*" capture="camera" @change="handleFileChange">
    <img :src="photoDataUrl" v-if="photoDataUrl" width="400" height="300"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoDataUrl: null
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (e) => {
        this.photoDataUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

注意事项

• 在移动设备上，capture="camera"属性会直接调用相机而非相册
• 需要确保应用运行在HTTPS环境下，某些浏览器对摄像头API有安全限制
• 拍照后可以调用stream.getTracks().forEach(track => track.stop())关闭摄像头
• 对于复杂的拍照需求，可以考虑使用第三方库如vue-web-cam