码迷,mamicode.com
首页 > Web开发 > 详细

HTML5拍照上传图片

时间:2020-02-17 14:15:12      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:nload   getc   files   fun   new   eve   htm   html5   context   

html

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

js

scan() {
      this.$refs.camera.click();
      console.log(‘开启拍照功能‘);
},
    toBase64(evevt) {
      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;
      };
    },

 

HTML5拍照上传图片

标签:nload   getc   files   fun   new   eve   htm   html5   context   

原文地址:https://www.cnblogs.com/ronle/p/12321451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!