当前位置：首页 > VUE

vue实现照相功能

2026-01-21 16:40:15VUE

使用HTML5的getUserMedia API实现拍照功能

在Vue中可以通过HTML5的getUserMedia API访问摄像头，结合canvas元素实现拍照功能。需要确保项目运行在HTTPS协议或localhost环境下，否则浏览器可能限制摄像头访问。

<template>
  <div>
    <video ref="video" autoplay></video>
    <canvas ref="canvas"></canvas>
    <button @click="capture">拍照</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null
    }
  },
  mounted() {
    this.startCamera()
  },
  beforeDestroy() {
    this.stopCamera()
  },
  methods: {
    async startCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true })
        this.$refs.video.srcObject = stream
        this.stream = 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 imageData = canvas.toDataURL('image/png')
      console.log(imageData) // 可以保存或上传
    },
    stopCamera() {
      if (this.stream) {
        this.stream.getTracks().forEach(track => track.stop())
      }
    }
  }
}
</script>

使用第三方库vue-web-cam

对于更简单的实现，可以使用vue-web-cam库，它封装了摄像头访问逻辑：

安装依赖：

npm install vue-web-cam

组件使用示例：

<template>
  <div>
    <web-cam ref="webcam" />
    <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()
    }
  }
}
</script>

移动设备上的优化处理

在移动设备上需要考虑横竖屏适配和分辨率优化：

async startCamera() {
  const constraints = {
    video: {
      width: { ideal: 1280 },
      height: { ideal: 720 },
      facingMode: 'environment' // 使用后置摄像头
    }
  }

  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints)
    this.$refs.video.srcObject = stream
  } catch(err) {
    console.error("摄像头错误:", err)
  }
}

图片保存与处理

获取图片后可以进一步处理或保存：

methods: {
  async saveImage() {
    const canvas = this.$refs.canvas
    const imageData = canvas.toDataURL('image/jpeg', 0.8)

    // 下载图片
    const link = document.createElement('a')
    link.href = imageData
    link.download = 'photo.jpg'
    link.click()

    // 或者上传到服务器
    const blob = await (await fetch(imageData)).blob()
    const formData = new FormData()
    formData.append('file', blob, 'photo.jpg')

    // 使用axios等库上传
  }
}

权限处理与错误反馈

需要处理用户拒绝权限的情况并提供友好提示：

async startCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true })
    this.$refs.video.srcObject = stream
  } catch(err) {
    if (err.name === 'NotAllowedError') {
      alert('请允许摄像头访问权限')
    } else if (err.name === 'NotFoundError') {
      alert('未找到摄像头设备')
    } else {
      console.error("摄像头错误:", err)
    }
  }
}

vue实现照相功能