HTML5拍照上传图片

html

 <span class="iconfont scan" @click="scan">
     <input ref="camera" type="file" @change="toBase64" style="position: absolute;top:50rem" accept="image/*" capture="camera" />
     拍照
</span>

js

scan() {
      this.$refs.camera.click();
      console.log('开启拍照功能');
},

    toBase64(event) {
      let file = event.target.files[0];
      if (!/image/w+/.test(file.type)) {
        alert('请确保文件为图像类型');
        return;
      }
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(event) {
        compress(event.target.result);
      };
      let compress = function(res) {
        let img = new Image();
        let maxH = 160;
        img.onload = function() {
          let cvs = document.createElement('canvas');
          let ctx = cvs.getContext('2d');
          if (img.height > maxH) {
            img.width *= maxH / img.height;
            img.height = maxH;
          }
          cvs.width = img.width;
          cvs.height = img.height;
          ctx.clearRect(0, 0, cvs.width, cvs.height);
          ctx.drawImage(img, 0, 0, img.width, img.height);
          let dataUrl = cvs.toDataURL('image/jpeg', 0.6);
          // 上传
          console.log(dataUrl);
        };
        img.src = res;
      };
    },