①、问题来源

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题

②、解决方法

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。

利用 exif.js 读取照片的拍摄信息。

这里主要用到Orientation属性。

Orientation属性说明如下：

③、代码

主要有html5页面和一个js，示例功能包含了图片压缩和旋转。

自己写的是uploadImage.js。

html5测试页面如下：

uploadImage.js 如下：

function selectFileImage(fileObj) {  
    var file = fileObj.files["0"];  
    //图片方向角 added by lzk  
    var Orientation = null;  
      
    if (file) {  
        console.log("正在上传,请稍后...");  
        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 (navigator.userAgent.match(/iphone/i)) {  
                    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);  
                $("#myImage").attr("src", base64);  
            };  
        };  
        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;    
    }    
}