Skip to content

Instantly share code, notes, and snippets.

@thachnuida
Last active July 4, 2019 12:02
Show Gist options
  • Save thachnuida/2f76fe3aaa15dbd1dfa3 to your computer and use it in GitHub Desktop.
Save thachnuida/2f76fe3aaa15dbd1dfa3 to your computer and use it in GitHub Desktop.
Angularjs Directive to rotate image base on EXIF orientation value
/* global EXIF */
'use strict';
// Require library: https://github.com/jseidelin/exif-js
// Require Jquery (If not have jquery you must handle DOM by native js code)
/**
@description this directive auto rotate image by css base on image orientation value
Check the example of image orientation here:
https://github.com/recurser/exif-orientation-examples
@example
<div class="modal-upload-file-thumbnail" ng-if="isOneImageFile">
<img ng-src="{{thumbnail}}" img-orientation/>
</div>
**/
angular.module('app').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;
}
}
});
});
}
};
});
@kindlychung
Copy link

Angular newbie here. Could you write up a jsfiddle to demo this? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment