调整上传图片的预览方向 (exif.js)

发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。
因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。

下载依赖

npm install exif-js --save  

在main全局引入

import EXIF from 'exif-js'
Vue.prototype.EXIF = EXIF

html5测试页面如下:

  
  
  
      
      
    图片上传  
      
      
          
      
  
  
    
上传图片: //调取手机摄像头的属性
preview

借鉴

$('#input_photo').on('change',function(){
    if(checkUA.isIOS){
        selectFileImage(this);
    }else{   //发现安卓用这个方法速度快得多。
        var fileval = this.value;
        if(!/\.(jpg|gif|jpeg|png|bmp)$/ig.test(fileval)){
            return false;
        }else{
            var url = window.URL.createObjectURL(file.files[0]);
            viewphoto.src = url;
        }
    }
}
function selectFileImage(fileObj) {  
        var file = fileObj.files['0'];  
        //图片方向角 added by lzk  
        var Orientation = null;  
          
        if (file) {  
            // console.log("正在上传,请稍后...");  
            document.querySelector('#fixed').style.display = 'block';
            var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  
            if (!rFilter.test(file.type)) {  
                //showMyTips("请选择jpeg、png格式的图片", false);  
                return;  
            }  
            // var URL = URL || webkitURL;  
            //获取照片方向角属性,用户旋转控制  
            EXIF.getData(file, function() {  
               // alert(EXIF.pretty(this));  
                EXIF.getAllTags(this);   
                //alert(EXIF.getTag(this, 'Orientation'));   
                Orientation = EXIF.getTag(this, 'Orientation');  
                //return;  
            });  
              
            var oReader = new FileReader();  
            oReader.onload = function(e) {
                //var blob = URL.createObjectURL(file);  
                //_compress(blob, file, basePath);  
                var image = new Image();  
                image.src = e.target.result;  
                image.onload = function() {  
                    var expectWidth = this.naturalWidth;  
                    var expectHeight = this.naturalHeight;  
                      
                    if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  
                        expectWidth = 800;  
                        expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  
                    } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  
                        expectHeight = 1200;  
                        expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  
                    }  
                    var 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;  
                    //修复ios  
                    if (checkUA.isIOS) {  
                        // console.log('iphone');  
                        //alert(expectWidth + ',' + expectHeight);  
                        //如果方向角不为1,都需要进行旋转 added by lzk  
                        if(Orientation != "" && Orientation != 1){  
                            // alert('旋转处理');  
                            switch(Orientation){  
                                case 6://需要顺时针(向左)90度旋转  
                                    // alert('需要顺时针(向左)90度旋转');  
                                    rotateImg(this,'left',canvas);  
                                    break;  
                                case 8://需要逆时针(向右)90度旋转  
                                    // alert('需要顺时针(向右)90度旋转');  
                                    rotateImg(this,'right',canvas);  
                                    break;  
                                case 3://需要180度旋转  
                                    // alert('需要180度旋转');  
                                    rotateImg(this,'right',canvas);//转两次  
                                    rotateImg(this,'right',canvas);  
                                    break;  
                            }         
                        }  
                          
                        /*var mpImg = new MegaPixImage(image); 
                        mpImg.render(canvas, { 
                            maxWidth: 800, 
                            maxHeight: 1200, 
                            quality: 0.8, 
                            orientation: 8 
                        });*/  
                        base64 = canvas.toDataURL("image/jpeg", 0.8);  
                    }else if (navigator.userAgent.match(/Android/i)) {// 修复android  
                        var encoder = new JPEGEncoder();  
                        base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);  
                     }else{  
                        //alert(Orientation);  
                        if(Orientation != "" && Orientation != 1){  
                            //alert('旋转处理');  
                            switch(Orientation){  
                                case 6://需要顺时针(向左)90度旋转  
                                    // alert('需要顺时针(向左)90度旋转');  
                                    rotateImg(this,'left',canvas);  
                                    break;  
                                case 8://需要逆时针(向右)90度旋转  
                                    // alert('需要顺时针(向右)90度旋转');  
                                    rotateImg(this,'right',canvas);  
                                    break;  
                                case 3://需要180度旋转  
                                    // alert('需要180度旋转');  
                                    rotateImg(this,'right',canvas);//转两次  
                                    rotateImg(this,'right',canvas);  
                                    break;  
                            }         
                        }  
                          
                        base64 = canvas.toDataURL("image/jpeg", 0.8);  
                    }  
                    //uploadImage(base64);  
                    $("#viewphoto").attr("src", base64);
                    // console.log("上传完成,请稍后..."); 
                    document.querySelector('#fixed').style.display = 'none';
                };  
            };  
            oReader.readAsDataURL(file);
        }  
    } 
//对图片旋转处理 added by lzk  
function rotateImg(img, direction,canvas) {    
        //alert(img);  
        //最小与最大旋转方向,图片旋转4次后回到原方向    
        var min_step = 0;    
        var max_step = 3;    
        //var img = document.getElementById(pid);    
        if (img == null)return;    
        //img的高度和宽度不能在img元素隐藏后获取,否则会出错    
        var height = img.height;    
        var width = img.width;    
        //var step = img.getAttribute('step');    
        var 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);    
        }    
        //img.setAttribute('step', step);    
        /*var canvas = document.getElementById('pic_' + pid);   
        if (canvas == null) {   
            img.style.display = 'none';   
            canvas = document.createElement('canvas');   
            canvas.setAttribute('id', 'pic_' + pid);   
            img.parentNode.appendChild(canvas);   
        }  */  
        //旋转角度以弧度值为参数    
        var degree = step * 90 * Math.PI / 180;    
        var ctx = canvas.getContext('2d');    
        switch (step) {    
            case 0:    
                canvas.width = width;    
                canvas.height = height;    
                ctx.drawImage(img, 0, 0);    
                break;    
            case 1:    
                canvas.width = height;    
                canvas.height = width;    
                ctx.rotate(degree);    
                ctx.drawImage(img, 0, -height);    
                break;    
            case 2:    
                canvas.width = width;    
                canvas.height = height;    
                ctx.rotate(degree);    
                ctx.drawImage(img, -width, -height);    
                break;    
            case 3:    
                canvas.width = height;    
                canvas.height = width;    
                ctx.rotate(degree);    
                ctx.drawImage(img, -width, 0);    
                break;    
        }  
    }

你可能感兴趣的:(vue)