Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-3887] Android: Image taken in portrait orients itself to landscape

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2017-05-17T18:25:51.000+0000
Affected Version/sRelease 1.7.0, Release 2.0.1
Fix Version/sSprint 2012-17 Core, Release 6.1.0
ComponentsAndroid
LabelsSupportTeam, core, exalture, merge-6.1.0, module_media, qe-testadded
ReporterThomas Huelbert
AssigneeJoshua Quick
Created2011-05-03T15:12:58.000+0000
Updated2017-05-17T20:56:29.000+0000

Description

phone > camera > camera basic

in portrait, take an image, then hit okay and look at resulting image

results: image is landscape expected: should reflect users orientation when image was taken notes: not seen when using landscape orientation to take image

Attachments

FileDateSize
s2.jpg2012-08-22T16:10:35.000+00002323112

Comments

  1. Pedro Enrique 2011-05-10

    I tested it also in 1.6.3 with the same results in a Verizon Motorola Droid running 2.2.2 There is a helpdesk ticket (http://support.appcelerator.com/tickets/HBE-21859-831/homepage) that needs this fixed
  2. Gentian Shkurti 2011-08-04

    Any update on this issue? I am seeing the same problem in 1.7.2 with Droid X and Droid 2. All images, both from camera and from gallery, always display in landscape orientation in ImageView and also are submitted in landscape to server as well (problem with image handling in event.media). This makes photo taking and uploading in Android unusable, since most people use portrait to take photos. The width and height properties also do not work in Android to be able to flip the image manually, so a workaround is not possible.
  3. Gentian Shkurti 2011-11-06

    This issue happens in 1.7.2 and 1.8.0 (continuous builds) as well. I am able to reproduce it every time for portrait images on Droid X and Droid 2.
  4. Junaid Younus 2012-05-15

    Issue still exists in 2.0.1GA2, using a Samsung Galaxy S2.
  5. Tamila Smolich 2012-05-23

    This bug also exists on: Titanium Studio, build: 2.0.3.201205222028 Titanium SDK: 2.0.2.v20120522180515 Device: Motorola Xoom (4.0.3)
  6. Laurence Kirchmeier 2012-05-31

    Any update on this issue - it is now over a year since this was first reported and it make the usage of the camera module on Android very limited if one is forced to take "landscape" orientation photographs.
  7. Allen Yeung 2012-08-22

    PR ready: https://github.com/appcelerator/titanium_mobile/pull/2807 This is the test case:
       function fireUpTheCamera() {
       	Titanium.Media.showCamera({
       
       		success : function(event) {
       			var cropRect = event.cropRect;
       			var image = event.media;
       
       			Ti.API.debug('Our type was: ' + event.mediaType);
       			if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
       
       				var imageView = Ti.UI.createImageView({
       					width : win.width,
       					height : win.height,
       					image : event.media,
       					autorotate: true
       				});
       				win.add(imageView);
       			} else {
       				alert("got the wrong type back =" + event.mediaType);
       			}
       		},
       		cancel : function() {
       		},
       		error : function(error) {
       			// create alert
       			var a = Titanium.UI.createAlertDialog({
       				title : 'Camera'
       			});
       
       			// set message
       			if (error.code == Titanium.Media.NO_CAMERA) {
       				a.setMessage('Please run this test on device');
       			} else {
       				a.setMessage('Unexpected error: ' + error.code);
       			}
       
       			// show alert
       			a.show();
       		},
       		saveToPhotoGallery : true,
       		allowEditing : true,
       		mediaTypes : [Ti.Media.MEDIA_TYPE_VIDEO, Ti.Media.MEDIA_TYPE_PHOTO]
       	});
       }
       
       win = Titanium.UI.createWindow({
       	backgroundColor: 'blue'
       });
       win.addEventListener('open', function(e) {
       	fireUpTheCamera();
       });
       
       win.open();
       
       
    In the fail case, the picture will be in landscape after you take an image. With my change (adding an 'autorotate' property), the picture will rotate accordingly. This only happens on certain phones, I used a galaxy s2 to reproduce the fail case.
  8. Allen Yeung 2012-08-22

    Please also use the attached image and run the following code to make sure that it rotates correctly from a project image:
       var win = Titanium.UI.createWindow();
       
       var image = Ti.UI.createImageView({
       	autorotate: true,
       	image: 's2.jpg'
       
       })
       
       win.add(image);
       win.open();
       
  9. Thomas Huelbert 2012-08-27

    and there was great rejoicing
  10. Thomas Huelbert 2012-08-27

    comment reopened - setting to resolved again
  11. Shyam Bhadauria 2012-08-29

    Note to QE - QEport for this bug will include both given .js for single scenario. 1. Take the image. 2. Use that image in second .js (as s2.jpg) Environment used for verification - Tested with Titanium SDK: 2.2.0.v20120828153312 Tested with Titanium  Studio: 2.1.2.201208201549 Device - Samsung GALAXY Note (2.3.6) Machine OS - MAC 10.8
  12. Justin Toth 2013-09-27

    Unsure why this was closed, it's still an issue in 3.1.3.GA...
  13. Allen Yeung 2013-09-27

    An 'autorotate' flag was introduced, and is not on by default. Please try using that flag.
  14. Justin Toth 2013-09-27

    You're right, thanks.
  15. Justin Toth 2013-09-30

    Here's a test that breaks it, based off of the test above. It seems that autorotate doesn't work within a tableview. Start in portrait, take a picture, and the thumbnail will show up correctly in portrait. Now switch to landscape, take another picture, and the thumbnail will incorrectly show in portrait.
        var win, table, row, cameraImage, image;
        
        function openCamera() {
            Ti.Media.showCamera({
                success: function(event) {
                    if (event.mediaType === Ti.Media.MEDIA_TYPE_PHOTO) {
                        if(image) {
                            row.remove(image);
                        }
                        image = Ti.UI.createImageView({
                            right: '10dp',
                            width: '40dp',
                            height: '40dp',
                            image: event.media,
                            autorotate: true
                        });
                        row.add(image);
                    } else {
                        alert('wrong type: ' + event.mediaType);
                    }
                },
                cancel: function() {
                },
                error: function(error) {
                    alert(error);
                },
                saveToPhotoGallery: true,
                allowEditing: true,
                mediaTypes: [ Ti.Media.MEDIA_TYPE_VIDEO, Ti.Media.MEDIA_TYPE_PHOTO ]
            });
        }
        
        win = Ti.UI.createWindow({
            backgroundColor: '#fff'
        });
        
        row = Ti.UI.createTableViewRow({
            height: '60dp',
            className: 'image-row'
        });
        var cameraImage = Ti.UI.createImageView({
            right: '10dp',
            width: '40dp',
            height: '40dp',
            image: '/images/camera.png',
            autorotate: true
        });
        row.add(cameraImage);
        
        table = Ti.UI.createTableView({
            top: 0, bottom: 0, left: 0, right: 0
        });
        table.setData([ row ]);
        table.addEventListener('click', openCamera);
        win.add(table);
        
        win.open();
        
  16. Allen Yeung 2013-10-01

    [~jtoth] If you are still having issues with this in a table view, it would be great if you could file a separate ticket for this. Thanks!
  17. Hieu Pham 2013-11-21

    This code snippet doesn't work even though 'autorotate' was set upon creation:
        var win = Ti.UI.createWindow({
            backgroundColor : 'white'
        });
         
        var imageView = Ti.UI.createImageView({
            width : 400,
            height : 400,
            autorotate: true
        });
        win.add(imageView);
         
        var button = Ti.UI.createButton({
            top : 0,
            title : "open camera"
        });
         
        button.addEventListener("click", function() {
            Titanium.Media.showCamera({
         
                success : function(event) {
                    Ti.API.info('Our type was: ' + event.mediaType);
                    if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
                        imageView.image = event.media.imageAsResized(400, 400);
         
                    } else {
                        alert("got the wrong type back =" + event.mediaType);
                    }
                },
                cancel : function() {
                    Ti.API.info("***************** cancel");
                },
                error : function(error) {
                    Ti.API.info("***************** error");
                },
                saveToPhotoGallery : true,
                mediaTypes : [Ti.Media.MEDIA_TYPE_VIDEO, Ti.Media.MEDIA_TYPE_PHOTO]
            });
        });
         
        win.add(button);
         
        win.open(); 
        
    Looking at the source code, it seems that 'autorotate' will only work IF we have an image set at creation also. Is this intended? (Tested with Galaxy S2)
  18. Priya Agarwal 2014-01-22

    Issue reproducible on some specific devices. Appc Studio:3.2.1.201401211804 Sdk:3.2.1.v20140121132444 alloy:1.3.1-beta3 titanium:3.2.1(from cli) acs:1.0.11 titanium-code-processor:1.1.0 Osx: Maverick 10.9 Xcode:5.0.2 Device:Samsung s3(v4.1.2) On Samsung S3(v4.1.2) could reproduce this. But also tried with Nexus 7(v4.4.2),Nexus7(v4.3),HTC Desire(v4.0.3) issue was not reproducible.
  19. ahmed atif salah 2014-02-18

    The problem is not fixed yet, I see it's reopened but no assigned date for resolving it. Please update me with even a workaround because I am stuck in that bug.
  20. Lokesh Choudhary 2014-03-04

    Tested for this issue using the above test code with the "autorotate" property set to true and here's what I found: 1. On Samsung S4 (android 4.2.2) -- I take a pic in portrait mode using camera, click save , the image appears in portrait mode in the app. 2. On Samsung S3 (android 4.0.4) -- I take a pic in portrait mode using camera, click save , the image appears in portrait mode in the app. 3. On Nexus 5 (android 4.4.2) -- I take a pic in portrait mode using camera, click save , the image appears in portrait mode in the app. 4. On sony Xperia (android 2.3.7) -- I take a pic in portrait mode using camera, click save , the image appears in portrait mode in the app. So from the results above we see that with the "autorotate" set to true we cannot reproduce it. Not setting or setting "autorotate" to false, I could see this issue exists on Samsung S3 , Samsung S4 & Sony Xperia but not on Nexus 5 Environment: Appc Studio : 3.2.1.201402061120 Ti SDK : 3.2.1.GA Mac OSX : 10.8.5 Alloy : 1.3.1 CLI - 3.2.1
  21. Ygor Lemos 2014-03-04

    What about landscape?
  22. Lokesh Choudhary 2014-03-04

    If the image is taken in landscape with "autorotate" set to true & we view the app with device in portrait orientation then, here are the findings: 1. On Samsung S4 (android 4.2.2) – I take a pic in landscape mode using camera, click save , the image appears in portrait mode in the app. 2. On Samsung S3 (android 4.0.4) – I take a pic in landscape mode using camera, click save , the image appears in portrait mode in the app. 3. On Nexus 5 (android 4.4.2) – I take a pic in landscape mode using camera, click save , the image appears in portrait mode in the app. 4. On sony Xperia (android 2.3.7) – I take a pic in landscape mode using camera, click save , the image appears in portrait mode in the app. If the device is in landscape orientation while viewing the pic captured then, all images appear in landscape. Environment: Appc Studio : 3.2.1.201402061120 Ti SDK : 3.2.1.GA Mac OSX : 10.8.5 Alloy : 1.3.1 CLI - 3.2.1
  23. Adrien NEVEU 2014-04-03

    Issue reproductible with device Samsung Galaxy S4 mini GT-I9195: Photo taken in portrait appear in landscape. Photo taken in landscape (clockwise from portait to landscape) appear upside down. ImageView's tag autorotate set to true in the TSS file. Photos taken shows OK on the browser of the phone (exif informations are good). Environment: Titanium Studio : 3.2.0 and 3.2.1.201402041146 Titanium SDK : 3.2.0.GA and 3.2.2.GA Alloy : 1.2 and 1.3.1 CLI : 3.2.0 and 3.2.1 Window 7 64bits
  24. Ingo Muschenetz 2014-06-16

    We believe this is fixed in 3.3.0. Need to re-test and confirm so.
  25. Kwab Fordjour 2014-07-25

    *Update:* My project's "Build Properties" in tiapp.xml were set to 3.2.2. Changing this to 3.3.0 somewhat fixed the problem on the S4. The media object that sent to the success callback width and height are always in landscape mode even when the image is in portrait. The result is that portrait images are squished vertically. *End Update* -I updated to 3.3.0 and ran Kitchen Sink. The issue is still there. The *imageView* with *autorotate* set to true ignores the exif orientation of the photo taken.- -I downloaded a clean version of Kitchen Sink and the issues was fixed there. However, When using similar code in my Alloy project the problem persists. Is it possible that the bug would only be fixed in classic titanium and not Alloy? Or that the fix only works for modules (as used in Kitchen Sink)? This bug has been blocking me for quite some time and an update would be be appreciated.- -Also note that the current Camera example in Kitchen Sink does not explicitly set *autorotate* to true.- -For now I'm going to try tracking the device orientation when the picture is taken and rotate the image view manually. This is less than ideal and I think this will screw up the image preview on android phones that don't have the rotation issue.- Device: Samsung Galaxy S4 SGH-I337M Android Version: 4.4.2 Environment: Titanium Studio : 3.3.0.201407100905 Titanium SDK : 3.3.0.GA CLI : 3.3.0 Alloy : 1.4.0 OS X 10.9.4
  26. Yishai Brown 2014-08-06

    My observation: When using Titanium.UI.ImageView ({autorotate: true}) to show an image. If the image is taken from the camera or the gallery for the first time, the image orientation is correctly auto presented. However, if there is a default image at construction time, the orientation is determined by the first image being used. I.e. if I set an image with landscape orientation at the construction of the ImageView and replace it later with an image with a portrate orientation, the result is rotated. If I save the picture in the gallery and reopen the parent window (thus creating the ImageView with the picture taken as the image) it is presented correctly. I'd expect the ImageView to retest the orientation each time the method "setImage" is being used. Using hide & show and or stop & start methods didn't help to fix the orientation. The workaround that worked was to reconstruct the ImageView for every new image... Samsung S3 Mini GT-I8200 Android 4.2.2 Ti 3.3.0 GA
  27. Ricardo Alcocer 2014-09-04

    This is still happening to me on some Android devices.
  28. Michael Gangolf 2014-09-11

  29. Yishai Brown 2014-09-12

    Hi Michael, Thanks for sharing the EXIF info. Per my note above, if I use a brand new ImageView object, the image is displayed correctly. Hence, It is hard for me to see the relation to the EXIF format. Kind Regards, Yishai
  30. Michael Gangolf 2014-09-12

    In the pull request mentioned before (https://github.com/appcelerator/titanium_mobile/pull/2807/files) the autorotate value is connected to the EXIF values. So I thought perhaps its not reading them correctly the second time or it might be connected to this. Working with camera images is a bit of a pain on linux. I hope it gets better and you don't need libraries like exif.js or fh.imagefactory
  31. Justin Toth 2014-10-26

  32. Ricardo Alcocer 2014-10-28

    This module fixed the issue for me.
  33. Fokke Zandbergen 2015-01-19

    so..... when does the fix in the above module get pulled into core? [~ingo], since the assigned Allen is labeled as Inactive, maybe reassign? ;)
  34. Alex Bernier 2015-04-28

    Thank you, heaps, [~jtoth] for the code, and [~ralcocer] for the module [on github](https://github.com/ricardoalcocer/AndroidRotateImage). Can't believe I didn't know about this until now. Works great. One of these days I want to add cropping to it and get rid of ImageFactory. This one is much faster at scaling than ImageFactory.
  35. Ygor Lemos 2015-05-19

    @ingo any chance for this to get on 4.X ?
  36. CIS Dev 689 2015-08-10

    I am facing this issue on Titanium SDK 4.1.0, Android version 5.0, Device name - Galaxy S5, Model number - SM-G900H, if you pick the same image from gallery (where it shows in portrait) you will result into a landscape image in your app.
  37. Tim Poulsen (ACV) 2016-05-19

    Still broken over 5 years later. No updates on Ricardo's module in forever (except my PR to recompile for 5.x). Maybe you guys could look at this issue??
  38. Clément Blanco 2016-06-21

    +1
  39. Miguel Ángel Castaño 2016-06-21

    I'm using Ricardo's module without problem. It works fine.
  40. Neville Dastur 2016-06-21

    But considering there is a ready made codebase and this is such a major fault it seems strange to have no progress at all.
  41. Be Rushton 2016-11-02

    Just went down this rabbit hole to fix this bug and ended up here. Ricardo's module fixed it for me. Another Ti bug that should have been fixed long long ago. Would love to see some movement on this issue. 49 watchers and over 5 years old.
  42. Frankie Merzadyan 2017-01-10

    master: https://github.com/appcelerator/titanium_mobile/pull/8742
  43. Gary Mathews 2017-05-10

    master: https://github.com/appcelerator/titanium_mobile/pull/9049 6_1_X: https://github.com/appcelerator/titanium_mobile/pull/9050
  44. Lokesh Choudhary 2017-05-17

    Verified the fix. Images taken orients in the correct orientation on an imageview & when photos are saved in the gallery. Closing. Studio Ver: 4.9.0.201705160715 SDK Ver: 6.1.0.v20170516173434 OS Ver: 10.12.3 Xcode Ver: Xcode 8.3.2 Appc NPM: 4.2.9 Appc CLI: 6.2.1 Ti CLI Ver: 5.0.13 Alloy Ver: 1.9.11 Node Ver: 6.10.1 Java Ver: 1.8.0_101 Devices: google Nexus 6 --- Android 6.0.1, Nexus 5 --- Android 6.0.1, Samsung Galaxy S3 --- Android 4.4.2, Samsung Galaxy S3 --- Android 4.0.4

JSON Source