Image orientation on upload.

[Ronnie]

Hello.

I have been playing around with PW for a while now (former WP user).

In issue that I have encountered is that when uploading images / photos. 

The original image is keeping the correct orientation, but the images that are being generated on the fly by PW are all ending up with lanscape orientation.

Example: 

I have a picture with:

width: 480px

height: 720px

Then upon resize the ratio is changed to example:

width: 200px

height: 133px

I have both tried the build in image module and the thumbnails module with the same results.

Any ideas / suggestions ? 

Thanks / Ronnie

[horst]

Hi Ronnie and welcome!

 

This sounds that the images you try to upload are originally have a rotation when created. Currently PW doesn't check/recognize the EXIF-orientation-flag in the Core-ImageSizer. But we have already included an autocorrection in the Email-Image-Module, so the code for that is already there (amongst with code for sharpening after downsizing!). But it has to get included into the core somehow. I've started to prepare code with that to send it Ryan so that he can test it, optionally modifiy it and finally add it to the core. But I#m short of time at the moment and can't say when it is done.

 

I bet you localy use an imageviewer that autocorrects the rotation when displaying the images. As a workaround you may try opening an image in a image-app like photoshop, do something like brightness +1% and then -1% and save it. Photoshop autocorrects the rotation when opening the image and also resets the EXIF-orientation-flag when saving the image. This also should work with most other image-manipulation-apps.

 

Edit: The planned additions should be usable also for the Thumbnail-Module. Here are a short screencast about manually sharpening.

Edited April 4, 2013 by horst

[arjen]

@Ronnie, first: welcome! Second: do you mean that the images don't resize proportional? Are you noticing this on the frond-end or the back-end? In case of the front-end you can change the size like this:

$image->size(100,"");

Notice that the image now gets resized to 100 pixels width and a variable height ("").

[horst]

@arjen: Oh, seems you better understood what is going on with the images. I only have read orientation == rotation.

@Ronnie: if your images are not rotated (top is not shown at top), you can ignore my post. Sorry, haven't got it right.

My rule for the next few weeks: If want to help, first read carefully the question, second read more carefully the question and third only do answer after understanding it right.

[Ronnie]

Hello.

Thanks for the quick response.

@horst: Seems like you are on to something, If I take the images and edit then in for instance XnView and resave them then PW is processing them correctly.

I done some read-up in the matter and it seems that W7/W8 does not recoqnize the EXIF orientations tags using the build in "Windows photo viewer", so changes to the orientation is not being recognized by the GD2 framework used in PW,

Meaning if you are usning Windows and change orientiation the EXIF orientation tag is not changed, guess Windows just stores that information in thumb.db or similar.

@arjen: "Missorientation" is both in backend and frontend.

If I downloaded the rezied images from the PW filestructure the orientation is wrong.

I know for a fact that other CMS software recognize the image orientation when altered i Windows, so it would be nice to get it working.

Even though I can set ut a PhotoShop batch job or smiliar, I have a couple of customers with very basic computer knowledge were it is essentials that it just works,

If you have any eureka moment in the matter please let me know, or you have run in to the same issue and have some simple tool that fixes the images before upload.

Thanks !

[arjen]

@horst, no worries

@Ronnie, I haven't seen this behaviour before so can't really help.

[horst]

... If I take the images and edit them in for instance XnView and resave them then PW is processing them correctly.

I done some read-up in the matter and it seems that W7/W8 does not recoqnize the EXIF orientations tags using the build in "Windows photo viewer", so changes to the orientation is not being recognized by the GD2 framework used in PW,

Meaning if you are usning Windows and change orientiation the EXIF orientation tag is not changed, guess Windows just stores that information in thumb.db or similar.

- If an image is shoot with a camera so that the Top becomes the right side, (it is rotated 90 degrees clockwise), this is stored in the EXIF-Orientation-Flag.

- If a software rotates this image 90 degrees counterclockwise and do not setup the EXIF-Orientation-Flag this is bad for every following software that relies on the EXIF-Oriantation-Flag, but GD2 doesn't do that.

My question: does the MS-Photo Viewer really changes the orientation / rotation of an image ? or does it only show them rotated but doesn't alter the files?

Can you make three copies of an image and let the first original from camera, the second rotated with MS-Photo-Viewer and the third saved with XnView and send it to me (ZIP 2 PM or upload here)?

[Ronnie]

Pics.zipHello.

@horst: Thanks for your effort.

I have taken a photo and in the ZIP file you will find three copies.

DSC_1259_org.jpg = Original, just downsized.

DSC_1259_rotate_windows.jpg = Rotated 360 degrees (as its showing correctly in windows explorer)

DSC_1259_rotate_XnView.jpg = Rotated 360 degrees and resaved (as its showing correctly in XnView to start with)

Sceen.jpg = Display in Windows Explorer

PW.jpg = As they turn up in PW

PW_all_org.jpg = This is the exact same image added to PW three times and the result differs between every upload !?

So I am seeing some for me pretty inconsitiant results where the same image is being displayed differently when being uploaded.

The only pic that is contantly correct is the copy that has being resaved bu XnView.

Would be much appretiated to figure this one out.

Thanks / Ronnie

[Ronnie]

Hi.

I tested the same thing with images taken by my phone and they worked perfectly.

So I started to fiddle with my camera a Nikon D3100 and found a setting.

"Automatic Picture Rotation" = ON

When I changed this setting to OFF the images where working in PW.

When rotation was turned ON the pictures was shown correctly om my computer and in my camera but not in PW.

When rotation was turned OFF the pictures was shown incorrecly om my computer and in my camera by after rotated in "Windows Photo Viewer" they where showing correctly in PW.

So I am not sure what all this sums up to, I guess that setting does something to the picture that PW has a hard time to interpret.

Some reading about the setting as such.

http://www.pictureandpen.com/Article_Nikon_Photography_Auto_Image_Rotation_vs._Rotate_Tall.asp

Thanks / Ronnie

[Pete]

Hi Ronnie - as horst says in his first reply:

Currently PW doesn't check/recognize the EXIF-orientation-flag in the Core-ImageSizer.

So it doesn't even attempt to check orientation at present. It's a fairly uncommon issue, but at the same time I don't think it's hard to read EXIF data in PHP (sure I've done it before) so it should be something that can be resolved as it would certainly help on photo galleries where this could crop up on newer cameras.

Not that I know how - just explaining out loud

EDIT: Here's the solution - http://stackoverflow.com/questions/7489742/php-read-exif-data-and-adjust-orientation - the original poster shows how to read EXIF rotation, then actual image rotation is pretty trivial from there.

EDIT2: I just re-read horst's replies and the updated code sounds like it's on its way to ryan

[horst]

I have taken a photo and in the ZIP file you will find three copies.

DSC_1259_org.jpg = Original, just downsized.

DSC_1259_rotate_windows.jpg = Rotated 360 degrees (as its showing correctly in windows explorer)

DSC_1259_rotate_XnView.jpg = Rotated 360 degrees and resaved (as its showing correctly in XnView to start with)

 Original, just downsized => why ? or how ? directly with the camera ?

 Anyway, it's like I've expected: original image and "rotated"-MS-Viewer image are identical = checked with crc32 and md5, (hmm, why do I check with both? )

 They are right-top oriented as was to read in Exif-Orientation. (the Viewer do not alter the files, it works as expected from a viewer!)

 The other one was TopLeft oriented, because your software has corrected it.

 The other stuff you are showing doesn't make any sense in the behave of PW / GD2. When uploading the same image again and again it couldn't differ. Please check the  files in your assets/files/--folders.

With all files that need to be rotated one have to wait until the mods have find their way into PW somehow. Sorry for the delay.

---

Edit/Add: Ronnie, you should go to a fresh clean empty folder in your Windows System. Leave all other files behind.

Then take only one picture from the camera, like you have send with the Zip. Make a copy of it, compare / note filesize and last-modified time of the copy. Put the copy into the MS-Viewer. Rotate it somehow and if your done - go to explorer and compare filesize and last_modified_time again.

You may also check if there are options with the Viewer what lets you disable the autocorrected display.

You may also use an alternative ImageViewer like Irfan-View. Irfan-View has in its Options under JPG / PCD / GIF > JPEG - Load a CheckBox with: Auto-rotate image according to EXIF-info (if available). I have this unchecked. Also I use Irfan-View as the defaultViewer with Windows 7 x64. It's much faster and more comfortable than any WindowsViewer. I have disabled every correction like using ICC-profiles, rotation, etc. It just throws the images to the screen as is, (looks ugly when its a CMYK.)

If your camera supports these different settings, try one by one, carefully. I think at least you come up with two versions: 1 with correction and 1 without. Check both of them and compare, best with an ImageViewer that has disabled auto-corrections.

After that go to PW, create a new page and upload these two images. Upload them twice and compare. If you have differences with the same images, I give up.

Edited April 4, 2013 by horst

[horst]

Actually there is a modified ImageSizer Class available for testing. It autoCorrects Rotation.

See this Post: http://processwire.com/talk/topic/3278-core-imagemanipulation/#entry32284

If you have enabled the EXIF-Extension in PHP and it doesn't read EXIF-fields correct, you may have a setup that needs  a little tweaking in the php.ini.

Search for https://www.google.de/search?q=PHP+EXIF+mbstring

In some (rare) cases (on Windows?) the mbstring extension must be loaded before the exif extension.

[Marco Angeli]

thank you, horst.