elementui拍照

以下是关于在 Element UI 中实现拍照功能的详细方法，结合第三方库或原生 API 实现：

使用 HTML5 原生 API

通过 <input type="file"> 结合 capture 属性调用设备摄像头：

<el-upload
  action=""
  :auto-upload="false"
  :show-file-list="false"
  :on-change="handleCameraCapture">
  <el-button type="primary">拍照上传</el-button>
  <input type="file" accept="image/*" capture="camera" style="display: none">
</el-upload>

methods: {
  handleCameraCapture(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      // e.target.result 为 Base64 格式的图片数据
      console.log(e.target.result);
    };
    reader.readAsDataURL(file.raw);
  }
}

结合 WebRTC 实现实时预览

通过 getUserMedia API 实现更灵活的拍照控制：

<template>
  <div>
    <video ref="video" autoplay playsinline style="width: 100%"></video>
    <el-button @click="capture">拍照</el-button>
    <canvas ref="canvas" style="display: none"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initCamera();
  },
  methods: {
    async initCamera() {
      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);

      // 获取图片数据
      const imageData = canvas.toDataURL('image/png');
      console.log(imageData);
    }
  }
};
</script>

注意事项

• 移动端需确保 HTTPS 环境才能调用摄像头
• 部分浏览器可能需要用户手动授权摄像头权限
• 拍照质量可通过调整 canvas 尺寸和压缩参数控制
• 实际项目中建议添加错误处理和加载状态提示

扩展建议

对于需要更复杂功能的场景，可以考虑以下方案：

• 使用第三方库如 vue-web-cam 专门处理摄像头操作
• 通过 EXIF 方向信息处理移动端图片旋转问题
• 添加图片裁剪功能（如配合 cropperjs 库）