手机照片预览上传拍照镜头方向问题

之前做的 手机拍照预览上传页面 在实际使用中出现了不同的持手机方式导致预览上传的图片方向出现旋转问题，搜集资料解决方案如下：

使用 exif ，获取照片方向参数，然后对照片作相应旋转处理。

引入exif.js：

<script type="text/javascript" src="js/exif.js"></script>

获取方向信息:

　　　　　　 var orientation;
            //EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
            EXIF.getData(file,function(){
                orientation=EXIF.getTag(this,'Orientation');
            });

方向判断：

var base64 = null;
    //修复ios
                if (navigator.userAgent.match(/iphone/i)) {
                    console.log('iphone');
                    //如果方向角不为1，都需要进行旋转 added by lzk
                    if(Orientation != "" && Orientation != 1){
                        /* alert('旋转处理'); */
                        switch(Orientation){
                             case 6://需要顺时针（向左）90度旋转
                                 rotateImg(this,1,canvas);
                                 break;
                             case 8://需要逆时针（向右）90度旋转
                                 rotateImg(this,3,canvas);
                                 break;
                             case 3://需要180度旋转
                                rotateImg(this,2,canvas);
                                break;
                        }        
                    }
                    base64 = canvas.toDataURL("image/jpeg", 0.9);
                }
　　　　　　　　　　// 修复android
　　　　　　　　　　else if (navigator.userAgent.match(/Android/i)) {
                    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度旋转
                                 rotateImg(this,1,canvas);
                                 break;
                             case 8://需要逆时针（向右）90度旋转
                                 rotateImg(this,3,canvas);
                                 break;
                             case 3://需要180度旋转
                                rotateImg(this,2,canvas);
                                break;
 } } base64 = canvas.toDataURL("image/jpeg", 0.9); } imagedata.show().attr('src', base64); 

旋转处理：

//对图片旋转处理 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(direction!=""&&direction!=undefined){
            step=direction;
        }
            
        //旋转角度以弧度值为参数  
        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;  
        }  
    } 

参考链接：

利用exif.js解决ios手机上传竖拍照片旋转90度问题

iphone手机html5上传图片方向问题解决