iphone的Safari浏览器中HTML5上传图片方向问题解决方法

怼烎@ 2022-05-13 01:38 162阅读 0赞

前段时间在上传图片的时候前端使用FileReader将图片读到内存，使用canvas进行压缩，然后上传，在安卓手机上没有问题，但是在iphone的Safari浏览器中一直存在图片方向不正的问题，经过多方面检查才明白，原因可以查看此处：[图片方向有误的原因][Link 1] 。

接下来来说解决方案：

首先可以使用GitHub上的[exif.js][] （[exif.js的翻译][exif.js 1]）来读取图片的`Orientation` 元数据，在根据下面这张图进行方向调整就OK了：

![Exif方向标记值][Exif]

下面主要把代码处理的关键位置展示出来，很多其他限制需要自行解决：

$("#uploaderInput").on("change", function (e) { 
        var files = e.target.files,
            canvasTemp = $("#canvasTemp")[0];
    
        for (var i = 0, len = files.length; i < len; i++) { 
            var file = files[i];
            EXIF.getData(file, function (file) { 
                var _this = this,
                    orientation = EXIF.getTag(_this, 'Orientation'),
                    reader = new FileReader();
                reader.readAsDataURL(_this);
                reader.onload = function () { 
                    var imgTemp = new Image();
                    imgTemp.src = this.result;
                    imgTemp.onload = function () { 
                        var thisImg = this;
                        var ctx = canvasTemp.getContext("2d");
                        var degree = 0,
                            drawWidth = sWidth,  // sWidth图片宽度
                            canvasWidth = sWidth,
                            drawHeight = sHeight, // sWidth图片高度
                            canvasHeight = sHeight;
    
                        if (orientation) { 
                            //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
                            switch (orientation) { 
                                //iphone横屏拍摄，此时home键在左侧
                                case 3:
                                    degree = 180;
                                    drawWidth = -sWidth;
                                    drawHeight = -sHeight;
                                    break;
                                //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
                                case 6:
                                    canvasWidth = sHeight;
                                    canvasHeight = sWidth;
                                    degree = 90;
                                    drawWidth = sWidth;
                                    drawHeight = -sHeight;
                                    break;
                                //iphone竖屏拍摄，此时home键在上方
                                case 8:
                                    canvasWidth = sHeight;
                                    canvasHeight = sWidth;
                                    degree = 270;
                                    drawWidth = -sWidth;
                                    drawHeight = sHeight;
                                    break;
                            }
                        }
    
                        // canvas清屏 
                        ctx.clearRect(0, 0, canvasTemp.width, canvasTemp.height);
                        // 重置canvas宽高 
                        canvasTemp.width = canvasWidth;
                        canvasTemp.height = canvasHeight;
    
                        //使用canvas旋转校正
                        ctx.rotate(degree * Math.PI / 180);
                        ctx.fillStyle = '#ffffff';
                        ctx.fillRect(0, 0, drawWidth, drawHeight);
                        ctx.drawImage(thisImg, 0, 0, drawWidth, drawHeight);
                        // 如果是jpeg/webp图片，可设置图片质量，png图片不能设置质量
                        var quantity = thisImg.src.length > (1024 * 1024) ? 0.8 : 1.0;
                        // 导出图片的base64
                        var dataUrl = canvasTemp.toDataURL('image/jpeg', quantity);
    
                        // 在页面中直接用此处导出的base64填充图片的src，并且上传的时候上传base64格式，或者是将base64转成Blob上传
                        
                        // base64转Blob
                        // function dataURLtoBlob(base64Data) { 
                        // var parts = base64Data.split(';base64,');
                        // var contentType = parts[0].split(':')[1];
                        // var raw = window.atob(parts[1]);
                        // var rawLength = raw.length;
                        // var uInt8Array = new Uint8Array(rawLength);
                        // for (var i = 0; i < rawLength; ++i) { 
                        // uInt8Array[i] = raw.charCodeAt(i);
                        // }
                        // return new Blob([uInt8Array], { type: contentType });
                        // }
                    }
                }
            });
        }
    });

实际上是iphone或者是支持带方向传感器的数码相机拍出来的照片都会带有`Orientation` 方向元数据，所以不管是在PC端还是移动端，都是需要加上面这段代码进行图片翻转的。

[Link 1]: https://blog.csdn.net/fxss5201/article/details/82533551
[exif.js]: https://github.com/exif-js/exif-js
[exif.js 1]: https://blog.csdn.net/fxss5201/article/details/82559039
[Exif]: /images/20220513/7674d8a96e734cc5af389317c79727a1.png