关于img图片翻转负90度的问题

参考链接:https://www.jianshu.com/p/442b5ad217b8

由于原作者把图片做了压缩,所以在这里我简化了一下(就是偷点懒)
前置:
1.我请求的是阿里的oss 需要在oss管理里添加跨域设置
2.exif.js 下载

js代码

/**
 * 判断图片角度并调整(针对手机拍照图片) 需要请求的图片地址允许跨域
 * @param fileNameFull <img> 标签的src
 * @param id  <img> 标签的id
 */
function imageSet(fileNameFull, id) {
    var Orientation = 1;
    var imageObj = new Image();
    $("#"+id).attr("src","");
    imageObj.crossOrigin="anonymous";
    imageObj.src = fileNameFull;
    imageObj.onload = function () {
        // 开始旋转
        console.log("进入旋转");
        EXIF.getData(imageObj, function () {
            console.log("开始旋转");
            Orientation = EXIF.getTag(this, "Orientation");
            if (Orientation && Orientation != 1) {
                switch (Orientation) {
                    case 6: // 需要旋转90度
                        console.log("旋转90");
                        $("#"+id).css("transform","rotate(90deg)");
                        break;

                    case 3:// 需要旋转180度
                        console.log("旋转180");
                        $("#"+id).css("transform","rotate(180deg)");
                        break;

                    case 8:// 需要旋转-90度
                        console.log("旋转-90");
                        $("#"+id).css("transform","rotate(-90deg)");
                        break;
                }
            } else {
                //回正
                $("#"+id).css("transform","rotate(0deg)");
            }
            $("#"+id).attr("src",fileNameFull);
        });
    };
}

搞了了一早上发现白写了,阿里的oss可以设置


只需要一个样式 选择自适应方向 亏我还找了一上午代码 阿西吧