0
iPhone에서 촬영 한 가로 이미지는 바탕 화면 Chrome에서는 거꾸로 표시되지만 iPhone Safari에서는 올바른 방향입니다. 예를 들어 홈페이지의 차량입니다. https://www.dapidi.com/#/AngularJS 1.5 프로젝트의 올바른 이미지 방향 설정
브라우저 나 장치에 문제가있는 것 같지 않습니다. 대답을 찾은 후에 나는이 지시기를 보았습니다.이 지시어는 대부분의 시간 동안 작동하지만,이 차의 이미지에는 적합하지 않습니다. 이미이 문제가 "해결 된 문제"라고 생각되지만 대답을 찾지 못하는 것 같습니다. 누구나 해결해야 할 공통적 인 딜레마를 해결하는 방법은 무엇입니까?
DIRECTIVE
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;
}
}
});
});
}
};
});