css - Proper image orientation in AngularJS 1.5 project -


landscape images taken iphone appear upside down on desktop chrome, proper orientation on iphone safari. example car on homepage https://www.dapidi.com/#/

i doubt problem browsers or devices. after searching answer came across directive seems work times, not image of car. believe should "solved problem" already, cannot seem find answer. have solution how solve surely common dilemma?

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;                             }                         }                     });                 });             }         };     }); 

user error. had typo in directive attribute name in html. was: img-fix-orientation should have been: img-orientation (face palm)

forgot had renamed @ point. directive seems work.


Comments

Popular posts from this blog

qt - QML MouseArea onWheel event not working properly when inside QML Scrollview -

java - is not an enclosing class / new Intent Cannot Resolve Constructor -

python - Error importing VideoFileClip from moviepy : AttributeError: 'PermissionError' object has no attribute 'message' -