H5网页调取设备拍照生成图片上传

话不多唠，直接上代码

<!-- Dom层大同小异都一样 -->
 <div class="publish">
    <video ref="video" id="videoDom" style="object-fit: cover;"></video>
    <!--canvas的宽高可指定为后台接受图片的宽高，这里的宽高必须制定，不然就是默认宽高-->
    <canvas style="display: none;" id="canvasCamera" width="1654" height="2339"></canvas>
    <!--下面就是拍完照后图片展示区-->
    <div v-if="imgSrc" class="img_bg_camera">
      <img :src="imgSrc" ref="tximg" class="tx_img" />
    </div>
    <button @click="OpenCamera">打开摄像头</button>
    <button @click="CloseCamera">关闭摄像头</button>
    <button @click="setImage">拍照</button>
  </div>

// 这个js是Base64转 file 或 blob方法便于上传，该方法我会放到下面
import { base64ConvertFile } from '@/utils/fileBase64Blob'
export default {
  name: 'CanvasImg',
  data () {
    return {
      imgSrc: '', // 拍照图片
      canvas: null,
      context: null
    }
  },
  mounted () {
    // 进入页面 自动调用摄像头
    this.getCamera()
  },
  methods: {
    // 调用打开摄像头功能
    getCamera () {
      // 获取 canvas 画布
      this.canvas = document.getElementById('canvasCamera')
      this.context = this.canvas.getContext('2d')
      const constraints = {
      // ** 想要高清晰图片需要设置宽高，宽高值根据拍照视口比例计算：以A4纸为例宽高比为1.41<后几位省略>，自己定义一个宽度值算出高度值如：2339/1.41 ≈ 1658 **
        video: {
          width: 2339,
          height: 1658,
          facingMode: { // 这里为后置摄像头，前置摄像头的配置为facingMode: "user"
            exact: "environment" 
          }
        }
      };
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(stream) {
          // console.log(stream, '：stream')
          var video = document.querySelector('#videoDom')
          if ('srcObject' in video) {
            video.srcObject = stream
          } else {
            video.src = window.URL.createObjectURL(stream)
          }
          video.onloadedmetadata = function (e) {
            video.play()
          }
        })
        .catch(function(err) {
          alert(err.name + ': ' + err.message)
        })
    },
    // 拍照 绘制图片
    setImage () {
      this.context.drawImage(
        this.$refs.video,
        0,
        0,
        1654,
        2339
      )
      // 获取图片base64链接
      const image = this.canvas.toDataURL('image/jpg')
      // console.log(image)
      this.$emit('refreshDataList', base64ConvertFile(image))
    },
    // 打开摄像头
    OpenCamera () {
      this.getCamera()
    },
    // 关闭摄像头
    CloseCamera () {
      this.$refs.video.srcObject.getTracks()[0].stop()
    }
  }
}

// fileBase64Blob.js
/* base64转file */
export const base64ConvertFile = function (urlData, filename) {
  if (typeof urlData != 'string') {
    return
  }
  let arr = urlData.split(',')
  let type = arr[0].match(/:(.*?);/)[1]
  let fileExt = type.split('/')[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.' + fileExt, {
    type: type
  })
}
/* base64转blob */
export const dataURItoBlob = (dataURI) => {
  let byteString = atob(dataURI.split(',')[1])
  let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
  let ab = new ArrayBuffer(byteString.length)
  let ia = new Uint8Array(ab)
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  return new Blob([ab], { type: mimeString })
}
/*file转base64方法*/
// let reader = new FileReader()
// reader.readAsDataURL(file[0])
// console.log(reader)

为什么没有style样式呢，懒得动懒得写全靠你们自由发挥。。。。。。。。。。。。!