Question

从iPhone上拍摄的风景图像在桌面浏览器上显示为颠倒，但在iPhone Safari上显示正确的方向。一个例子是主页上的汽车https://www.dapidi.com/#/

我怀疑问题出在浏览器或设备上。在寻找答案后，我遇到了这个指令似乎大多数时候都有效，但不是这辆车的形象。我相信这应该是一个“已解决的问题”，但我似乎无法找到答案。任何人都有解决方案如何解决这个常见的困境？

指令

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项目中的正确图像方向

1 个答案: