vue中调用摄像头拍照上传图片

最新推荐文章于 2025-05-30 08:56:45 发布

原创

最新推荐文章于 2025-05-30 08:56:45 发布 · 8.3k 阅读

22 ·

CC 4.0 BY-SA版权

步骤：

1、打开摄像头，显示拍照页面，初始化调用摄像头的方法

2、点击拍照，进行拍照

3、确定后，上传并显示

一、此功能涉及两个vue页面
1、cameraPreview.vue （进行拍照的页面，如下图所示）

2、main.vue（调用摄像头的页面）
二、cameraPreview.vue

<el-dialog :visible.sync="visible" title="拍照" width="41%" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form>
      <div class="camera-box">
        <video id="video" :width="videoWidth" :height="videoHeight" v-show="!imgSrc"></video>
        <canvas id="canvas" :width="videoWidth" :height="videoHeight" v-show="imgSrc"></canvas>
        <p class="camera-p">{
  
  {!imgSrc?'提示：请将材料居中按"拍照"键确认':''}}</p>
        <el-button type="primary" @click="setImage" v-if="!imgSrc" class="camera-btn">拍照</el-button>
        <el-button type="prima