Latest Contributions by TomSellsted

Greetings, We have a couple of apps that allow users to post images that are saved as an attachment to a feature class.  This all works very well until you want to display the image embedded on on another web page.  Depending on how the user took the image, it can be rotated or flipped so that it won't have the proper orientation on your web page by default.  On some browsers, if you view the image directly, it does display in the proper orientation. This problem is created when devices want to take images very quickly and don't want to take the time to save the image in the proper orientation. Instead they are stored with EXIF information which contains a wide gamut of information pertaining specifically to that image.  GPS information, date and time, device, and many others including orientation. Using Sebastian Tchaun's JavaScript to interpret this information and makes it possible to orient the image properly.  His repo is on github at: blueimp/JavaScript-Load-Image · GitHub With some assistance from Randy Bonds Jr.​ some basic code to make this happen: load the code:     <script src="js/load-image.js"></script>     <script src="js/load-image-orientation.js"></script>     <script src="js/load-image-meta.js"></script>     <script src="js/load-image-exif.js"></script> Get the attached image: featureLayer.queryAttachmentInfos(featureAttributes.OBJECTID, loadAnImage, errorImage); Load and orient the image:         function loadAnImage(response) {             var imgSource = response[0].url + "/" + response[0].name;             var xhr = new XMLHttpRequest();             xhr.open('GET', imgSource, true);             xhr.responseType = 'blob';             xhr.onload = function(e) {                 var ori = 0;                 if (this.status == 200) {                     var blob = this.response;                     loadImage.parseMetaData(blob, function(data) {                         if (data.exif) {                             ori = data.exif.get('Orientation');                         }                         var loadingImage = loadImage(                             blob,                             function(img) {                                 document.body.appendChild(img);                             }, {                                 maxWidth: 600,                                 canvas: true,                                 orientation: ori                             }                         );                     });                 }             };             xhr.send();         } I hope this helps someone else going through a similar struggle or if someone has an even better method for accomplishing proper image orientation, I would love to hear from you. Regards, Tom ... View more