相机图片旋转实现

##开始撸代码
开始造轮子之前先介绍一款JS插件
import EXIF from ‘exif-js’
exjf 是读取相片的原始属性数据
这个是一张原始的相册图片
在这里插入图片描述
在这里插入图片描述
这是一张原始的手机拍摄的相册图片，其实每张照片都有其特定的字段属性信息，通过exif-js 就能够帮助我们快速的读取这个图片的基础信息，如下
先给大家看看exif信息都存在哪里：（角度就在0x0112）
exif信息的地址
以下就是神奇的表现时刻

class PhotoRalation{
    //画图
    async drawPhoto(fileOBJ,callFn){
        let rangeImg=/(jpg|png|gif|jpeg)/i;
        if(!rangeImg.test(fileOBJ.type))
        {
            callFn(fileOBJ);
            return;
        }
        const _self=this;
         const oReader = new FileReader();
         oReader.readAsDataURL(fileOBJ);
         oReader.onload=function(e){
            let Orientation= null;
             const phtoSrc=e.target.result;
             EXIF.getData(fileOBJ, function() {
                EXIF.getAllTags(this); 
                Orientation = EXIF.getTag(this, 'Orientation');
                if (/(iphone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    callFn(fileOBJ);
                }else{  
                    _self.readerFile(phtoSrc,Orientation,fileOBJ,callFn)
                }   
            });   
             
        }
      
    }
    rotateImg(photo,step,canvas,callFn){
        var height = photo.height;  
        var width = photo.width;  
        //旋转角度以弧度值为参数  
        var degree = step * 90 * Math.PI / 180;  
        var ctx = canvas.getContext('2d');  
        switch (step) {  
            case 0:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.drawImage(photo, 0, 0);  
                break;  
            case 1:  
                canvas.width = height;  
                canvas.height = width;  
                ctx.rotate(degree);  
                ctx.drawImage(photo, 0, -height);  
                break;  
            case 2:  
                canvas.width = width;  
                canvas.height = height;  
                ctx.rotate(degree);  
                ctx.drawImage(photo, -width, -height);  
                break;  
            case 3:  
                canvas.width = height;  
                canvas.height = width;   
                ctx.rotate( degree);   
                ctx.drawImage(photo, -width, 0); 
                break;  
        }  
        
        if(callFn){
            callFn()
        } 
        
    }
    //数转换换二进制
    dataURLtoBlob(dataurl,fileType,fileName) {
          var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], fileName, {type: fileType, lastModified: Date.now()});
    }
    
    //将Base64转换为File
     dataURLtoFile(theBlob, fileName) {//将base64转换为文件
        let newFile= new File([theBlob], fileName, {type: 'jpg', lastModified: Date.now()});
         return newFile;
    }

    //读取图片并旋转
    readerFile(phtoSrc,Orientation,fileOBJ,callFn){
        let _self = this;
        const photo=new Image();
        photo.src=phtoSrc;
        photo.onload=function(){
            const expectWidth=this.width;
            const expectHeight=this.height;
           const canvas=document.createElement('canvas');
           var ctx = canvas.getContext("2d");
           canvas.width = expectWidth;
           canvas.height = expectHeight;
           ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
           var base64 = null;
          
           if(Orientation)
           {
               console.log('Orientation' ,Orientation)
               switch(Orientation){ 
                   
                   case 6://需要顺时针（向左）90度旋转
                       _self.rotateImg(this,1,canvas);
                       break;
                   case 8://需要逆时针（向右）90度旋转
                       _self.rotateImg(this,3,canvas);
                       break;
                   case 3://需要180度旋转  
                      console.log('3')
                        _self.rotateImg(photo,2,canvas);//转两次
                      
                      break; 
              }	
           }
            base64=canvas.toDataURL(fileOBJ.type);   
            //如果需要预览旋转后的图片可以在HTML界面中任意地方创建个DIV，并设置DIV的ID
            // document.getElementById('testImg').src=base64;
            myFile=_self.dataURLtoFile(base64,fileOBJ.filename);
           let myFile= _self.dataURLtoBlob(base64,fileOBJ.type,fileOBJ.name);
            callFn(myFile);
        }
    }
}

##调用

    const photoRaltion=new PhotoRalation();
      photoRaltion.drawPhoto(value.value[0],(newFile)=>{
		//yourCode 这里是你要自行处理及逻辑，或上传或直接显示
	}）