选择图片上传之后，图片旋转问题解决方案(前端)

图片上传之后，显示为什么会是旋转的呢？

这就要说到图片的 exif

简单来说，Exif 信息就是由数码相机在拍摄过程中采集一系列的信息，然后把信息放置在我们熟知的 JPEG/TIFF 文件的头部，也就是说 Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数，它就好像是相机的日期打印功能一样，只不过 Exif信息所记录的资讯更为详尽和完备。Exif 所记录的元数据信息非常丰富，主要包含了以下几类信息：

而我们的图片会旋转就是这里面的Oriention在捣鬼，那么我们该如何利用它呢？

很简单，我们只要能够知道Oriention的值，知道它往哪旋转了，那么我们反方向旋转过来就好了。

具体怎么做呢？怎么获取到 Oriention的值呢？

https://github.com/exif-js/exif-js 这个可以看到官方的demo

可以使用 exif.js 这个文件来处理，具体直接看代码吧

var img = new Image();

img.src ='图片的base64';

let _this = this;

img.onload = function () {

    EXIF.getData(img, function () {  //判断照片是否旋转

        // EXIF.getAllTags(this);
        let orientation = EXIF.getTag(img, 'Orientation');
        
        //参数说明 方向、图片base64 、图片大小需要转成MB   (图片大小b) / (1024 * 1024) 
         _this.compress(orientation,this,（图片大小需要转成MB), (dataUrl) => {

               //这里的dataUrl就是我们得到的矫正的图片的base64 

         });
         
    });
};

compress(orientation, res, fileSize, callBack) { //res代表上传的图片，fileSize大小图片的大小
    var img = new Image();
    let maxW = 1080;
    img.src = res;
    let _this = this;
    img.onload = function () {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');
        if (img.width > maxW) {
            img.height *= maxW / img.width;
            img.width = maxW;
        }
        
        if(orientation===8||orientation===6) {

            canvas.width = img.height;
            canvas.height = img.width;

        }else{

            canvas.width = img.width;
            canvas.height = img.height;
        }


        ctx.translate(canvas.width / 2, canvas.height / 2);

        switch (orientation) {

            case 8:

                ctx.rotate(90 * Math.PI / 180);
                ctx.drawImage(img, -(canvas.height / 2), -(canvas.width / 2), canvas.height, canvas.width);


                break;

            //旋转180度
            case 3:

                ctx.rotate(180 * Math.PI / 180);
                ctx.drawImage(img, -(canvas.width / 2), -(canvas.height / 2), canvas.width, canvas.height);

                break;


            //旋转-90度
            case 6:

                ctx.rotate(-90 * Math.PI / 180);
                ctx.drawImage(img, -(canvas.height / 2), -(canvas.width / 2), canvas.height, canvas.width);


                break;

            default:

                ctx.rotate(360 * Math.PI / 180);
                ctx.drawImage(img, -(canvas.width / 2), -(canvas.height / 2), canvas.width, canvas.height);

                break;

        }

        var compressRate = _this.getCompressRate(0.8, fileSize);

        let dataUrl = canvas.toDataURL('image/jpg', compressRate);

        if (callBack) {
            callBack(dataUrl);
        }

    }
}
getCompressRate(allowMaxSize, fileSize) { //计算压缩比率，size单位为MB
    var compressRate = 1;
    if (fileSize / allowMaxSize > 4) {
        compressRate = 0.5;
    } else if (fileSize / allowMaxSize > 3) {
        compressRate = 0.6;
    } else if (fileSize / allowMaxSize > 2) {
        compressRate = 0.7;
    } else if (fileSize > allowMaxSize) {
        compressRate = 0.8;
    } else {
        compressRate = 0.9;
    }
    return compressRate;
}


// 将base64转换成file对象
dataURLtoFile(dataurl, filename = "file") {
    let arr = dataurl.split(",");
    let mime = arr[0].match(/:(.*?);/)[1];
    let suffix = mime.split("/")[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], `${filename}.${suffix}`, {type: mime});
}

其实整个处理就是这么简单了，这是在能够获取到图片的Oriention的情况下，那么还有获取不到的时候么？有的…我就遇到了

首先重要的一点 Oriention ，仅仅是在图片是jpg/jpeg的情况下才能够处理，png是不行的，这点很重要。

那么如果获取不到图片的Oriention怎么办呢？

首先我先说一下我为什么获取不到，经过实测我们的项目中iOS的可以正常获取，Android的不行，究其原因，我发现应该使我们的手机客户端的浏览器容器的问题，

因为这个容器本身修改过一些代码，做过一些自定义适配业务的修改，经过我的多番测试确定是它的问题，那么怎么办呢？

也不敢随意修改和替换容器，这个成本比较高。

最后我使用了一种这种的办法，选择图片之后，让用户手动旋转，让用户告诉我们，应该往哪旋转，然后做处理。

这也是一种不得已的办法。

其实还有一种方式，既然是图片的Oriention值导致了图片的旋转问题，那么我们是否可以修改这个值，或者某些条件下去除这个值呢？

消除图片的exif信息的影响。

https://github.com/hMatoba/piexifjs

我还找到了js来专门干这个事情的，有兴趣的童鞋可以试试。

更多内容，欢迎同步关注作者公众号二维码！
程序员内功修炼手册 主要发布计算机基础、设计模式、计算机网络基础知识，同时重点关注大前端知识
Android、iOS、web前端、Flutter、React Native等，想学习大前端知识的速度来吧，一起学习、一起成长！