vue 电脑端调摄像头拍照，canvas转base64，base64转图片文件并上传到服务器

梦里梦外; 2022-05-10 13:18 186阅读 0赞

VUE（用了iview）：

<template>
      <div id='cameraUpload'>
        <Form ref='member' :label-width='120' :model='member' :rules='memberRule' style='width: 600px'>
          <FormItem label='照片' prop='photo'>
            <div v-if="member.photo" class="uploadPhoto" >
              <img :src="member.photo">
            </div>
            <Button type='ghost' long style='width: 120px;' icon="ios-camera" @click="handleCamera">拍摄照片</Button>
          </FormItem>
        </Form>
    
        
        <Modal v-model='modal.visibleCamera' title='拍照' footer-hide width='800' :mask-closable='false' >
          <div class="cameraBox">
            <video id="video" width="300" height="220"></video>
            <canvas id='canvas' width='300' height='220' style="display: none"></canvas>
          </div>
          <div class="iCenter" style="margin-top: 20px">
            <Button type='primary' long size='large' @click="takePhone" style='width: 200px;' :loading="loading.cameraLoading">拍照</Button>
          </div>
        </Modal>
      </div>
    </template>
    <script>
      export default {
        name: 'cameraUpload',
        data() {
          return {
            loading: {
              cameraLoading: false
            },
            modal: {
              visibleCamera: false
            },
            memberInit: {},
            member: {
              photo: ''
            },
            memberRule: {
            },
            canvas: null,
            video: null,
            MediaStreamTrack: null
          }
        },
        mounted() {
          // 摄像头
          this.canvas = document.getElementById('canvas')
          this.video = document.getElementById('video')
        },
        methods: {
          handleCamera() {
            this.modal.visibleCamera = true // 打开摄像头弹层
            let that = this
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
              navigator.mediaDevices.getUserMedia({
                video: true,
                audio: true
              }).then(function (stream) {
                that.MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1]
                that.video.src = (window.URL).createObjectURL(stream)
                that.video.play()
              }).catch(function (err) {
                console.log(err)
              })
            } else if (navigator.getMedia) {
              navigator.getMedia({
                video: true
              }).then(function (stream) {
                that.MediaStreamTrack = stream.getTracks()[1]
                that.video.src = (window.webkitURL).createObjectURL(stream)
                that.video.play()
              }).catch(function (err) {
                console.log(err)
              })
            }
          },
          takePhone() {
            let that = this
            that.canvas.getContext('2d').drawImage(this.video, 0, 0, 300, 220)
    
            let dataurl = that.canvas.toDataURL('image/jpeg')
            let blob = that.dataURLtoFile(dataurl, 'camera.jpg') // base64 转图片file
            let formData = new FormData()
            formData.append('file', blob)
            that.xhrPost(formData) // formdata方式上传图片
          },
          xhrPost(formData) {
            console.log('开始上传')
            let that = this
            that.loading.cameraLoading = true
            let xhr = null
            if (window.XMLHttpRequest) {
              xhr = new XMLHttpRequest()
            } else if (window.ActiveXObject) {
              xhr = new ActiveXObject('Microsoft.XMLHTTP')
            }
            if (xhr != null) {
              xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                  if (xhr.status === 200) {
                    let resData = JSON.parse(xhr.responseText)
                    console.log(resData)
                    if (resData.code === 200) {
                      that.MediaStreamTrack && that.MediaStreamTrack.stop() // 关闭摄像头
                      that.member.photo = resData.data.absolutePath
                      that.loading.cameraLoading = false
                      that.modal.visibleCamera = false
                    } else {
                      that.loading.cameraLoading = false
                      that.$Notice.warning({title: '提示', desc: resData.msg})
                    }
                  }
                }
              }
              const user = JSON.parse(localStorage.getItem('userM'))
              xhr.open('post', 'http://192.168.8.45:8201/sys/uploadFile')
                // 请求头不需要可以删除
              xhr.setRequestHeader('Authorization', user.token)
              xhr.setRequestHeader('platform', '1')
              xhr.setRequestHeader('apiVersion', '1')
    
              xhr.send(formData)
            } else {
              that.$Notice.warning({title: '提示', desc: '您的浏览器不支持XMLHTTP'})
            }
          },
          dataURLtoFile(dataurl, filename) {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], filename, {type: mime})
          }
        }
      }
    </script>
    <style>
      #cameraUpload{
        background: #fff;
        padding: 30px 40px;
      }
      .uploadPhoto{
        width: 150px;
        height: 110px;
        border:1px solid #f2f2f2;
        margin-bottom: 5px;
      }
      .uploadPhoto img{
        width: 100%;
        height: 100%;
      }
      .cameraBox {
        width:300px;
        background:#F2F2F2;
        margin: 0 auto;
      }
    </style>

DOM：

<!DOCTYPE html>
    <html lang="ZH-CN">
    <head>
      <meta charset="utf-8">
      <title>web RTC 测试</title>
      <style>
        .booth {
          width:400px;
         
          background:#ccc;
          border: 10px solid #ddd;
          margin: 0 auto;
        }
      </style>
    </head>
    <body>
      <video width="200px" height="150px"></video>
      <canvas width="200px" height="150px"></canvas>
      <p>
          <button id="start">打开摄像头</button>
          <button id="snap">截取图像</button>
          <button id="close">关闭摄像头</button>
      </p>
     
     
      <script>
        var canvas = document.getElementsByTagName('canvas')[0],
                   context = canvas.getContext('2d'),
                   video = document.getElementsByTagName("video")[0],
                   snap = document.getElementById("snap"),
                   close = document.getElementById("close"),
                   start = document.getElementById("start"),
                   MediaStreamTrack;
               start.addEventListener('click', function () {
                   if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                       navigator.mediaDevices.getUserMedia({
                           video: true,
                           audio: true
                       }).then(function (stream) {
                           console.log('stream1:', stream);
                           console.log('getTracks1:', stream.getTracks()[1])
                           MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
                           video.src=(window.URL).createObjectURL(stream);
                           video.play();
                       }).catch(function(err){
                           console.log(err);
                       });
                   }else if(navigator.getMedia){
                       navigator.getMedia({
                           video: true
                       }).then(function (stream) {
                           console.log('stream2:', stream);
                           console.log('getTracks2:', stream.getTracks()[1])
                           MediaStreamTrack=stream.getTracks()[1];
    
                           video.src=(window.webkitURL).createObjectURL(stream);
                           video.play();
                       }).catch(function(err){
                           console.log(err);
                       });
                   }
               });
               snap.addEventListener('click', function () {
                   context.drawImage(video, 0, 0,200,150);
               });
               close.addEventListener('click', function () {
                   MediaStreamTrack && MediaStreamTrack.stop();
               });
      </script>
    </body>
    </html>