Rotating an image in HTML tag

Andrew Vitale

05 November 2018 20:59

Hello everyone,

 

I’m noticing that images that are attached to point features are appearing to my users orientated incorrectly (i.e. rotated counter-clockwise in the final application) when the image is called upon using html tags.  I searched for an html tag that would control the orientation of an image, but only found code specific to the particular browser my users may be using.  See below:

 

 

 

/* Safari and Chrome */

 

<img src="xyz.jpg" style="-webkit-transform:rotate(45deg);">

 

 

 

/* Firefox */

 

<img src="xyz.jpg" style="-moz-transform:rotate(45deg);">

 

 

 

/* Opera */

 

<img src="xyz.jpg" style="-o-transform:rotate(45deg);">

 

 

 

/* IE9 */

 

<img src="xyz.jpg" style="-ms-transform:rotate(45deg);">

 

 

 

Although this works for the specific browser - my users may be using more than one, so this might be a bit confusing and limiting.  

 

I also found some conversation online about altering the native orientation of the original image using CSS (something I’m not terribly familiar with).  But I’m not really interested in having to adjust the "behind the scenes" code for every single image my users may create as attachments onto all feature types.

 

Is there any solution to this?  Is there an html tag that would work across browsers?  Am I even on the right path?  If I am limited to "recommending" a particular browser, so be it.  But I wanted to do my due diligence before I begin giving my users pointed advice.  

 

Any insight would be most helpful.  

 

Thanks!

 

Andrew

0

• 

  Permanently deleted user

  06 November 2018 00:14

  Hi Andrew,

   

  If you open the image with a basic application like MS Paint, is the orientation OK?

   

  The meta data stored with the image may be telling applications to rotate it and the few applications that support this may be causing the inconsistent results.

   

  CSS has an image orientation tag called  image-orientation but if all browsers don't support the tag it will not help you.

   

  The Image meta data is called EXIF and you can view it using a tool such as http://exifdata.com/ to see what it is set to and compare two images that behave differently.

   

  Regards,

   

  Wayne Richard

   

  Latitude Geographics Group Ltd.

   

  Head Office: 300 – 1117 Wharf Street  Victoria, BC Canada V8W 1T7

   

  Tel: (250) 381-8130 | Fax: (250) 381-8132 | wrichard@latitudegeo.com 

   

  Developers of Geocortex web-based mapping software | www.geocortex.com

   

  An Esri Platinum Business Partner

   

   

  0
• 

  Andrew Vitale

  14 November 2018 16:53

  Hi Wayne,

   

  Thanks for the response.  

   

  I dont have access to the raw images as they are onjects in an ESRI attachement class / attachment table.  So modifying the raw images is not possible. 

   

  However, when I did some testing there does seem to be an orientation automatically set my the device used to capture the raw image (in this case a phone or a tablet).  I had to use some rotation HTML tags to get the photo to show up ocrrectly.  The only wrinkle is that these HTML tags are browser specific.  In our case, I have been recommending Chrome for my users.  This wrinkle will now stress that preference as the HTML tag for IE is different than the one for Chrome - and the two tags cannot be used at the same time without two seperate copies of the image come up (one would be "correct" for that browser, the other one will not).  

   

  This is a bit disappointing for my users and limiting for myself as the Essentials Manager.  Would you happen to be aware of any HTML tag that can be used to rotate an image that is not browser specific?  Just curious...

   

  Andrew

  0

Du måste logga in om du vill lämna en kommentar.