JavaScript实现调用摄像头完成拍照取图重命名并下载或上传

最新推荐文章于 2026-06-25 03:31:42 发布

原创

最新推荐文章于 2026-06-25 03:31:42 发布 · 1.1k 阅读

标签

#javascript #vue.js #前端

这篇博客详细介绍了如何在Vue项目中结合Element UI实现摄像头拍照并上传图片的功能。通过HTML5的getUserMedia接口获取摄像头视频流，然后利用canvas进行截图并转换为文件上传到服务器。同时，文章还展示了相关代码实现，包括video和canvas元素的使用，以及上传图片的处理流程。

环境条件

具有内置摄像头或外设摄像头
Vue + Element + axios（环境不同可自行修改，本文主要为逻辑，除展示的上传控件其他与js基本无异）

全文

<template>
  <div id="all">
    <el-upload
      :headers="{token:userinfo.token}"
      class="upload-demo"
      list-type="picture-card"
      :multiple="false"
      :limit="5"
      :action="uploadimgUrl"
      :on-success="uploadPhoto"
      :on-remove="handleRemovePhoto"
      :file-list="fileListimg"
      multiple>
      <i class="el-icon-plus"></i>
    </el-upload>

    <div class="gp">
      <video ref="gpp2"></video>
    </div>
    <div class="footer" style="display: flex;justify-content: space-between;margin-top: 10px">
      <el-button type="primary" @click="takeGpp">抓 拍 上 传</el-button>
    </div>
    <canvas ref="canvas" v-show="false" height="960" width="1600"></canvas>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "demo",
  data(){
    let url = process.env.VUE_APP_BASE_API;
    let baseUrl = this.$baseUrl;
    let userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
    return{
      fileListimg:[],
      fileliststr:"",
      video:{},
      baseUrl,
      userinfo,
      uploadimgUrl:url+"/upload_images",

    }
  },
  mounted() {
    this.initGpp();
  },
  methods:{
    openGpp() {
      // this.dialogFormVisible = true;
      setTimeout(() => {
        this.initGpp();
      }, 100)
    },
    initGpp() {
      this.video = this.$refs.gpp2;
      console.log(this.video)
      // this.video = document.getElementById('video')
      //兼容性写法,判断getUserMedia方法是否存在
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || window.getUserMedia;
      if (navigator.getUserMedia) {
        //调用用户媒体设备, 访问摄像头
        this.getUserMedia({video: {width: 1600, height: 960}}, this.success, this.error);
      } else {
        alert('不支持访问用户媒体');
      }
    },
    getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, succes