微信端实现上传图片并预览（兼容苹果旋转图片问题）

前端上传图片在安卓上面很简单，直接用canvas画出来就好了，主要是苹果手机很麻烦，因为苹果手机会旋转图片。所以canvas画出来的图片可能是旋转一定角度的。

话不多说，解决这个问题代码如下：

html代码:

<img src="img/fanpai-font.png" id="stage" />
<input type="file" class="file" onchange="selectFileImage(this)" />

js代码：

这个要导入exif.js.这个是用来获取苹果手机照片方向角属性，用户旋转控制的。

<script src="js/exif.js"></script>

function selectFileImage(fileObj) {  
    var file = fileObj.files['0'];  
    var Orientation = null;  
    if (file) {  
        console.log("正在上传,请稍后...");  
        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  
        if (!rFilter.test(file.type)) {  
            alert("请选择jpeg、png格式的图片");  
            return;  
        }    
        //获取照片方向角属性，用户旋转控制  
        EXIF.getData(file, function() {  
            EXIF.getAllTags(this);   
            Orientation = EXIF.getTag(this, 'Orientation');  
        });  
        var oReader = new FileReader();  
        oReader.onload = function(e) {  
            var image = new Image();  
            image.src = e.target.result;  
            image.onload = function() {  
                var expectWidth = this.naturalWidth;  
                var expectHeight = this.naturalHeight; 
                var scale=expectWidth/expectHeight；
                var canvas = document.createElement("canvas");  
                var ctx = canvas.getContext("2d");  
                canvas.width = expectWidth;  
                canvas.height = expectHeight;  

                //如果方向角不为1，都需要进行旋转 
                if(Orientation && Orientation != "" && Orientation != 1){  
                    var degree=0;
                    switch(Orientation){  
                        case 6://需要顺时针（向左）90度旋转  
                            degree=90;  
                            canvas.width = expectHeight;  
                            canvas.height = expectWidth;
                            ctx.translate(expectHeight/2,expectWidth/2);
                            ctx.rotate(degree * Math.PI / 180);
                            ctx.translate(-expectWidth/2,-expectHeight/2);
                            ctx.drawImage(image,0,0,expectWidth,expectHeight);
                            break;  
                        case 8://需要逆时针（向右）90度旋转  ;
                            degree=-90;  
                            canvas.width = expectHeight;  
                            canvas.height = expectWidth;
                            ctx.translate(expectHeight/2,expectWidth/2);
                            ctx.rotate(degree * Math.PI / 180);
                            ctx.translate(-expectWidth/2,-expectHeight/2);
                            ctx.drawImage(image,0,0,expectWidth,expectHeight);
                            break;  
                        case 3://需要180度旋转  
                            degree=-180;  
                            ctx.rotate(degree * Math.PI / 180);
                            ctx.drawImage(image,-expectWidth,-expectHeight,expectWidth,expectHeight);
                            break;  
                    }         
                }else{
                    ctx.drawImage(image,0,0,expectWidth,expectHeight);
                } 
                var datu = canvas.toDataURL("image/png");
                $("#stage").attr("src", datu)；
            };  
        };  
        oReader.readAsDataURL(file);  
    }  
}