Solved

Correction of rotation of pictures coldfusion

Posted on 2015-01-03
2
370 Views
Last Modified: 2015-01-09
Portrait pictures get rotated?

http://www.housecarers.com/photo_view2.cfm?mem=2145674015&slide=6

So this is an example of the same page where the image is ok - for another client.
It does not happen for most images posted by clients  - just some

http://www.housecarers.com/photo_view2.cfm?mem=2145661960&slide=4

Please how do I Prevent this? - display without rotation, or rotate back to normal
I just want the picture to display as is.


When I look at the original it is OK see below - it is portrait - see here:
http://housecarers.com/pics/2145674015_6.jpg?ref=%227842%22

I am told I will need a coldfusion server solution, the reason only some images appear flipped is becuase
the cameras are different. this is meta data set by the camera - nothing to do with CSS.

I am on CF10

I am also told while I can do rotation client side,
I would need to wait until the image is loaded to get the exif_data to determine whether
 to rotate or not. imo, lots of unnecessary work that's better left to the server

<IMG ID="DataField40" SRC="/pics/2145674015_6.jpg?ref=4096"  
ALT="House Sitters Pictures from YouthfulRetiree">

Open in new window

0
Comment
Question by:Ian White
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 40532170
Edit: Added more detail


Please how do I Prevent this? - display without rotation, or rotate back to normal I just want the picture to display as is.

If I'm not mistaken, I think that IS the actual angle of the image, and the EXIF orientation tells capable devices how to rotate it.  If so, you'd need to apply any orientation shift to the image object.

To do it server side, the basic process would be:

1) read the orientation from the metadata.
2) use the returned orientation to rotate the image to the correct position
3) Fix (or remove) the orientation value in the metadata. (Otherwise, the browser will continue to rotate the image).
4) Save the "fixed" image to disk.

Unfortunately .. CF doesn't have much in the way of native EXIF functionality.  It only supports "reading" metadata. AFAIK there are no functions for modifying or saving metadata.

If you don't need to preserve the metadata, the simplest option is to manipulate the image and save the fixed image to disk. ImageWrite erases all metadata, so once you save a new copy of the image, the "orientation" value won't be an issue anymore. Note - since image functions are very process intensive, only do this once, when the image is uploaded/added.

For example, using the image above:

<cfset origImage = imageRead(ExpandPath("2145674015_6.jpg"))>
<!--- get orientation from metadata --->
<cfset orientation = ImageGetEXIFTag(origImage,"orientation")>
<cfif orientation eq "Right side, top (Rotate 90 CW)">
	<cfset ImageRotate(origImage, 90)>
</cfif>
<!--- save it to disk WITHOUT the metadata --->
<cfset imageWrite(origImage, ExpandPath("newImage.jpg"))>


Fixed Image: <img src="newImage.jpg">

Open in new window



Of course you need to handle other orientations as well.  Unfortunately, CF seems to present a "human friendly" description instead of the standard orientation values used by most programs: ie orientation 1-8. I don't see a listing of possible values in the CF docs anywhere, so you may need to do some research on those. But the basic idea is the same. Get the orientation, rotate or flip the image accordingly.

If you need to preserve the EXIF metadata for some reason, try something like http://writeexif.riaforge.org/. I have not used it myself, but it may work.
0
 

Author Closing Comment

by:Ian White
ID: 40541480
Thanks - I think I will just give the users the option to rotate
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question