Vue手机端人脸识别照片上传

readFile.js图片（照片）压缩，图片旋转调整(base64)

import EXIF from "exif-js" //先引入npm install exif-js --save
let imgPreview = function(file,callback){
      let Orientation
	//这里的Exif是判断图片旋转的
      that.Exif.getData(file, function () {
        Orientation = that.Exif.getTag(file, 'Orientation');
      });
      if (!file || !window.FileReader) return;
      if (/^image/.test(file.type)) {
        let reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onloadend = function() {
          let result = this.result;
          let img = new Image();
          img.src = result;
          img.onload = () => {
            let data = that.compress(img, Orientation);
            callback(data);
          };
        };
      }
}
let compress = function(img,Orientation){
 let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      let width = img.width/3.5;
      let height = img.height/3.5;
      canvas.width = width;
      canvas.height = height;
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, width, height);
      console.log(Orientation)
	//处理ios手机旋转角度问题
      if (navigator.userAgent.match(/iphone/i)) {  
        if(Orientation != "" && Orientation != 1){  
          switch(Orientation){  
          case 6:
            this.rotateImg(img,'left',canvas);  
            break;  
          case 8: 
            this.rotateImg(img,'right',canvas);  
            break;  
          case 3: 
            this.rotateImg(img,'right',canvas);//转两次  
            this.rotateImg(img,'right',canvas);  
            break;  
          }         
        }
      }else{ 
	//处理其安卓类手机图片旋转的问题 
        if(Orientation != "" && Orientation != 1){   
          switch(Orientation){  
            case 6:
              this.rotateImg(img,'left',canvas);  
              break;  
            case 8: 
              this.rotateImg(img,'right',canvas);  
              break;  
            case 3: 
              this.rotateImg(img,'right',canvas);
              this.rotateImg(img,'right',canvas);  
              break;  
          }         
        }
      }
      // ndata 为base64格式的图片上传时可直接使用，根据清晰度的要求进行调整，这里我用的是0.4
      var ndata = canvas.toDataURL("image/jpeg", 0.4);
      return ndata;
}
let rotateImg = function(img, direction,canvas) { 
      //最小与最大旋转方向，图片旋转4次后回到原方向 
      const min_step = 0; 
      const max_step = 3; 
      if (img == null)return; 
      //img的高度和宽度不能在img元素隐藏后获取，否则会出错 
      //这里因为图片像素太大进行了一个3.5倍的缩放 
      let height = img.height/3.5; 
      let width = img.width/3.5; 
      let step = 2; 
      if (step == null) { 
        step = min_step; 
      } 
      if (direction == 'right') { 
        step++; 
        //旋转到原位置，即超过最大值 
        step > max_step && (step = min_step); 
      } else { 
        step--; 
        step < min_step && (step = max_step); 
      } 
      //旋转角度以弧度值为参数 
      let degree = step * 90 * Math.PI / 180; 
      let ctx = canvas.getContext('2d');
      console.log(step)
      switch (step) { 
        case 0: 
        canvas.width = width; 
        canvas.height = height; 
        ctx.drawImage(img, 0, 0, width, height); 
        break; 
        case 1: 
        canvas.width = height; 
        canvas.height = width; 
        ctx.rotate(degree); 
        ctx.drawImage(img, 0, -height, width, height); 
        break; 
        case 2: 
        canvas.width = width; 
        canvas.height = height; 
        ctx.rotate(degree); 
        ctx.drawImage(img, -width, -height, width, height); 
        break; 
        case 3: 
        canvas.width = height; 
        canvas.height = width; 
        ctx.rotate(degree); 
        ctx.drawImage(img, -width, 0, width, height); 
        break; 
      } 
    }
    export {imgPreview};

使用方法

<template>
	<input type="file" id="uploadImgInput" accept="image/*"
    style="display:none" capture="camera">
    <button @click="photoClick">
    拍照
    </button>
</template>

<script>
	import {imgPreview} from "@/plugins/fliter/readFile"
    export default{
    data(){
    	return:{
        }
    },
    methods:{
    	photoClick(){
        	const uploadImgInput = document.elementById("uploadImgInput");
            uploadImgInput.click();
            uploadImgInput.addEventListener("change", this.readFile);
        };
        readFile(e){
        	let _this = this;
            let files = e.target.files || e.dataTransfer.files;
            if(!files.length) return;
            this.picavalue = files[0];
            var reader = new FileReader();
            reader.readAsDataURL(this.picavalue);
            reader.onload = function(e){
            	var imgTemp = new Image();
                imgTemp.src = e.target.result;
                //操作页面预览
            };
            imgPreview(this.picavalue, function(data){
            	//data为base64；
            }
        }
    }
    }
</script>