解决H5图片旋转问题

newImg('.rich_img');
function newImg(className) {
    var Orientation=1;
    var imageObj = new Image();
    imageObj.setAttribute('crossOrigin', 'anonymous');//解决图片跨域问题,跨域会导致toDataURL失败
    imageObj.src = $(className).attr('src');
    imageObj.οnlοad=function(){
        var Orientation=1;
        var cvs=document.createElement('canvas');
        var ctx=cvs.getContext('2d');
        var scale=1;//预留压缩比
        var size=this.size;
        cvs.width=this.width*scale;
        cvs.height=this.height*scale;//计算等比缩小后图片宽高
        EXIF.getData(imageObj,function() {
            Orientation=EXIF.getTag(this,"Orientation");
            if(Orientation&&Orientation!=1){
                switch(Orientation){
                    /**
                     *这边主要是获取到要加载标签的宽和高，用来给画布设置大小，这里cvs是预支的画布，ctx是重画的图像。
                     */
                    case 6:// 旋转90度
                        var fatherWidth=parseFloat($(className).css('width'));
                        var fatherheight=parseFloat($(className).css('height'));
                        scale=fatherWidth/this.width;
                        heightScale=fatherheight/this.height;
                        cvs.width=fatherheight*1;
                        var x=this.height*scale/2;
                        //旋转后的画布高度
                        cvs.height=fatherWidth;
                        ctx.rotate(Math.PI/2);
                        // (0,-imgHeight) 获得的起始点
                        ctx.drawImage(this,0,-this.height*scale-(fatherWidth/1.4-x),fatherWidth,fatherheight);
                        break;
                    case 3:// 旋转180度
                        ctx.rotate(Math.PI);
                        ctx.drawImage(this,this.width*scale,-this.height*scale,this.width*scale,this.height*scale);
                        break;
                    case 8:// 旋转-90度
                        cvs.width=this.height*scale;
                        cvs.height=this.width*scale;
                        ctx.rotate(3*Math.PI/2);
                        ctx.drawImage(this,-this.width*scale,0,this.width*scale,this.height*scale);
                        break;
                }
            }else{
                ctx.drawImage(this,0,0,cvs.width,cvs.height);
            }
            var newImageData=cvs.toDataURL(this,1);
            //重新定向加载url地址
            $(className).attr('src',newImageData);
        });

    };
}

注：浏览器访问和手机访问会有所不同，画布宽高还是要根据实际调整！！！  需引入exif.js