在web中如何調整上傳過的圖片方向 (exif)

前提： 相機中拍的照片放到web上不會自動識別方向，如有些豎向顯示的照片放到web上橫向顯示。這些照片在windows上是正確顯示的。但是web不會自動旋轉照片到正確方向。下面我們通過兩種方法來實現這件事情。

EXIF 可交換圖形文件格式。是專門為數碼相機的照片設定的，可以記錄數據照片的屬性信息和拍攝數據。

數碼設備拍攝照片時，會把許多屬性附加在照片文件里，這些屬性構成了大家常說的 Exif 信息。訪問我的相冊會發現照片下也有對應的 Exif 信息。Exif 中有個 Orientation 字段，用來存放照片方向，這就是我們需要的，看下它的定義

• JS 前端解決

如何從圖片中獲取 Exif 信息，各個語言都有封裝好的代碼可以直接使用。Javascript 也不例外，國外某同學 08 年就發布了可用代碼。他的做法分為兩步，首先通過 Ajax 獲取原始二進制，這在 firefox 和 webkit 比較好辦，在 IE 下需要借助 VBScript 的幫忙；第二步是從原始數據不同位置獲取相關信息。

從圖片 Exif 信息中取到 Orientation 后，就可以根據它來自動旋轉圖片了，canvas、filter 濾鏡、vml、css3 都可以實現圖片的旋轉。

綜合上文，寫了一個 demo，兼容大部分瀏覽器。【demo 由一個web端開發人員寫的】

其實，大部分的圖片查看客戶端早已支持自動旋轉，所以一般情況下數碼設備拍的照片用電腦看，方向都是正確的。許多縮略圖生成程序，也是可以指定縮放前自動旋轉的（例如 ImageMagick 的 -auto-orient 參數）。

原文鏈接：https://imququ.com/post/how-to-auto-rotate-photo-in-css.html

exif.js  https://github.com/exif-js/exif-js

主要引用了：

<script type="text/javascript" src="/Scripts/BinaryAjax.js"></script>
<script type="text/javascript" src="/Scripts/exif.js"></script>
<script type="text/javascript" src="/Scripts/rotate.js"></script>

        BinaryAjax('test.jpg', function (o) {
            var oExif = EXIF.readFromBinaryFile(o.binaryResponse),
                orientation = oExif.Orientation;
            html = [];

            html.push('<ol>');
            for (var key in oExif) {
                var val = oExif[key];
                html.push('<li>', key, '&nbsp;&nbsp;:&nbsp;&nbsp;<em>');
                html.push(val, '</em></li>');
            }
            html.push('</ol>');
            document.getElementById('console').innerHTML = html.join('');

         function () {
                var img = document.getElementById('img');
                switch (orientation) {
                    case 6:
                        Rotate(img, '90deg');
                        break;
                    case 3:
                        Rotate(img, '180deg');
                        break;
                    case 8:
                        Rotate(img, '270deg');
                        break;
                }
            };
        });

• 通過后台代碼解決

 C# 代碼解決圖片旋轉問題。

 public static void rotating(Bitmap img,ref int width, ref int height, int orien)
        {
            int ow = width;
            switch (orien)
            {
                case 2:
                    img.RotateFlip(RotateFlipType.RotateNoneFlipX);//horizontal flip
                    break;
                case 3:
                    img.RotateFlip(RotateFlipType.Rotate180FlipNone);//right-top
                    break;
                case 4:
                    img.RotateFlip(RotateFlipType.RotateNoneFlipY);//vertical flip
                    break;
                case 5:
                    img.RotateFlip(RotateFlipType.Rotate90FlipX);
                    break;
                case 6:
                    img.RotateFlip(RotateFlipType.Rotate90FlipNone);//right-top
                    width = height;
                    height = ow;
                    break;
                case 7:
                    img.RotateFlip(RotateFlipType.Rotate270FlipX);
                    break;
                case 8:
                    img.RotateFlip(RotateFlipType.Rotate270FlipNone);//left-bottom
                    width = height;
                    height = ow;
                    break;
                default:
                    break;
            }
        }