AngularJS 1.5 项目中的正确图像方向

Question

从 iPhone 拍摄的横向图像在桌面 Chrome 上显示倒置，但在 iPhone Safari 上显示正确方向。一个例子是首页的汽车https://www.dapidi.com/#/

我怀疑问题出在浏览器或设备上。在寻找答案后，我遇到了这个指令，它似乎在大多数情况下都有效，但不适用于这辆车的形象。我相信这应该已经是 "solved problem"，但我似乎找不到答案。任何人都可以解决这个常见的难题吗？

指令

angular.module('myApp')
    .directive('imgOrientation', function(){
        return {
            restrict: 'A',
            link: function(scope, element/*, attrs*/) {
                function setTransform(transform) {
                    element.css('-ms-transform', transform);
                    element.css('-webkit-transform', transform);
                    element.css('-moz-transform', transform);
                    element.css('transform', transform);
                }

                var parent = element.parent();
                $(element).bind('load', function() {
                    EXIF.getData(element[0], function() {
                        var orientation = EXIF.getTag(element[0], 'Orientation');
                        var height = element.height();
                        var width = element.width();
                        if (orientation && orientation !== 1) {
                            switch (orientation) {
                                case 2:
                                    setTransform('rotateY(180deg)');
                                    break;
                                case 3:
                                    setTransform('rotate(180deg)');
                                    break;
                                case 4:
                                    setTransform('rotateX(180deg)');
                                    break;
                                case 5:
                                    setTransform('rotateZ(90deg) rotateX(180deg)');
                                    if (width > height) {
                                        parent.css('height', width + 'px');
                                        element.css('margin-top', ((width -height) / 2) + 'px');
                                    }
                                    break;
                                case 6:
                                    setTransform('rotate(90deg)');
                                    if (width > height) {
                                        parent.css('height', width + 'px');
                                        element.css('margin-top', ((width -height) / 2) + 'px');
                                    }
                                    break;
                                case 7:
                                    setTransform('rotateZ(90deg) rotateY(180deg)');
                                    if (width > height) {
                                        parent.css('height', width + 'px');
                                        element.css('margin-top', ((width -height) / 2) + 'px');
                                    }
                                    break;
                                case 8:
                                    setTransform('rotate(-90deg)');
                                    if (width > height) {
                                        parent.css('height', width + 'px');
                                        element.css('margin-top', ((width -height) / 2) + 'px');
                                    }
                                    break;
                            }
                        }
                    });
                });
            }
        };
    });

Answer 1

用户错误。我在 HTML 中的指令属性名称中有错字。是：img-fix-orientation 应该是：img-orientation （脸掌）

忘了我在某个时候给它重命名了。该指令似乎有效。

AngularJS 1.5 项目中的正确图像方向

Proper image orientation in AngularJS 1.5 project

css

image

orientation

angularjs