Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16122] Android: Image does not rotate correctly within an ImageView with overlay

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-04-15T21:29:52.000+0000
Affected Version/sn/a
Fix Version/s2014 Sprint 08, 2014 Sprint 08 SDK, Release 3.3.0
ComponentsAndroid
Labelsandoid, imageview, module_media, overlay, qe-closed-3.3.0, qe-testadded, showcamera, supportTeam
ReporterNicholas Cooper
AssigneeVishal Duggal
Created2013-11-20T17:34:37.000+0000
Updated2014-07-29T17:02:52.000+0000

Description

When using Ti.Media.showCamera with an overlay on Android the returned media does not rotate correctly within an ImageView when autorotate is true. Removing the overlay from the same code fixes the problem.

Attachments

FileDateSize
CameraOverlay-ConsoleOutput.txt2014-01-16T19:11:37.000+00005312
Screenshot_2014-01-16-10-45-42.png2014-01-16T19:11:37.000+000061257
Screenshot_2014-01-16-10-48-15.png2014-01-16T19:11:37.000+00002081660
Screenshot_2014-01-16-10-51-15.png2014-01-16T19:11:37.000+000052042
tia-779242744.jpg2014-01-16T19:20:14.000+00003086321

Comments

  1. Mostafizur Rahman 2013-11-25

    Hello, We have tested this issue with the test code below. It’s working fine for us. Please try out this code to see if you can reproduce it. If you continue to encounter this issue, please send us your test sample.

    Testing environment:

    OS: MAC OS X 10.8.5 Ti SDK: 3.1.3 GA Ti CLI: 3.2.0 Android SDK 2.3.3 Device

    Test code 

       
   var win1 = Titanium.UI.createWindow({
   	backgroundColor : '#fff',
   });
   
   var contenner = Ti.UI.createView({
   	width : Ti.UI.SIZE,
   	height : Ti.UI.SIZE,
   	top : 0,
   	backgroundColor : '#eee',
   	borderColor : '#eee',
   	layout : 'vertical',
   });
   win1.add(contenner);
   
   var anImageView = Ti.UI.createImageView({
   
   });
   contenner.add(anImageView);
   
   var controlview = Ti.UI.createView({
   	width : Ti.UI.FILL,
   	height : Ti.UI.SIZE,
   	top : 20,
   });
   
   contenner.add(controlview);
   
   var frmcamera = Ti.UI.createButton({
   	backgroundImage : 'none',
   	backgroundColor : '#ff0000',
   	title : 'Open Camera',
   	color : '#fff',
   	width : 80,
   	height : 50,
   	left : 10,
   });
   
   frmcamera.addEventListener('click', function() {
   	fireUpTheCamera();
   });
   
   controlview.add(frmcamera);
   
    
   // Create an ImageView.
   var overlay = Ti.UI.createImageView({
   	image : '/images/appcelerator_small.png',
   	width : Ti.UI.FILL,
   	height : Ti.UI.FILL,
   	autorotate: true,
   });
   
   overlay.addEventListener('load', function() {
   	Ti.API.info('Image loaded!');
   });
   
   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) {
   				anImageView.image = image;
   				//new_upload_profile_picture_update(anImageView.image);
   			} 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 : false,
   		overlay : overlay,
   		mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
   	});
   }
   
   win1.open();

    Step to test

    1. Create a new project 2. Paste test code in app.js 3. Now run on Android Device 4. Click on button to camera h5. Expect Result/Actual Result Overlay image rotate good Thanks
  2. Mauro Parra-Miranda 2013-11-26

    Hello Nicholas, can you please test the testcase and see if works for you? TIA! Best, Mauro
  3. Mauro Parra-Miranda 2013-11-26

    Tested and can't reproduce.
  4. Nicholas Cooper 2013-11-26

    I've updated the test case, after you call TakePicture the image is rotated incorrectly, autoRotate does not work. 
     
   var win1 = Titanium.UI.createWindow({
   	backgroundColor : '#fff',
   });
   
   var contenner = Ti.UI.createView({
   	width : Ti.UI.SIZE,
   	height : Ti.UI.SIZE,
   	top : 0,
   	backgroundColor : '#eee',
   	borderColor : '#eee',
   	layout : 'vertical',
   });
   win1.add(contenner);
   
   var anImageView = Ti.UI.createImageView({
   	autorotate: true,
   });
   contenner.add(anImageView);
   
   var controlview = Ti.UI.createView({
   	width : Ti.UI.FILL,
   	height : Ti.UI.SIZE,
   	top : 20,
   });
   
   contenner.add(controlview);
   
   var frmcamera = Ti.UI.createButton({
   	backgroundImage : 'none',
   	backgroundColor : '#ff0000',
   	title : 'Open Camera',
   	color : '#fff',
   	width : 80,
   	height : 50,
   	left : 10,
   });
   
   frmcamera.addEventListener('click', function() {
   	fireUpTheCamera();
   });
   
   controlview.add(frmcamera);
   
   var overlay = Ti.UI.createView({
   	width : Ti.UI.FILL,
   	height : Ti.UI.FILL,
   	autorotate: true,
   }); 
   // Create an ImageView.
   var overlayImg = Ti.UI.createImageView({
   	image : '/KS_nav_ui.png',
   	width : Ti.UI.SIZE,
   	height : Ti.UI.SIZE,
   });
   
   
   overlayImg.addEventListener('click', function() {
   	Ti.Media.takePicture();
   });
   overlay.add(overlayImg);
   
   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) {
   				anImageView.image = image;
   				//new_upload_profile_picture_update(anImageView.image);
   			} 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 : false,
   		overlay : overlay,
   		mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
   	});
   }
   
   win1.open();
  5. Ping Wang 2014-01-20

    Tested the above code on Galaxy SII (2.3.6) with 3.2.0.GA. The image does not rotate correctly no matter whether the overlay is set or not.
  6. Andrew Greenstreet 2014-01-21

    I have a pull request that fixes this issue: https://github.com/appcelerator/titanium_mobile/pull/4968 I have a jar that fixes this if anyone want's it in advance of 3.3
  7. Ingo Muschenetz 2014-02-05

    [~andrew@gstreetmedia.com], thank you. Have you signed a CLA?
  8. Andrew Greenstreet 2014-02-05

    Yep.
  9. Hieu Pham 2014-02-26

  10. Hieu Pham 2014-02-26

    Testing steps: 1. Run this code 
        var win1 = Titanium.UI.createWindow({
        backgroundColor : '#fff',
    });
     
    var contenner = Ti.UI.createView({
        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        top : 0,
        backgroundColor : '#eee',
        borderColor : '#eee',
        layout : 'vertical',
    });
    win1.add(contenner);
     
    var anImageView = Ti.UI.createImageView({
        autorotate: true,
    });
    contenner.add(anImageView);
     
    var controlview = Ti.UI.createView({
        width : Ti.UI.FILL,
        height : Ti.UI.SIZE,
        top : 20,
    });
     
    contenner.add(controlview);
     
    var frmcamera = Ti.UI.createButton({
        backgroundImage : 'none',
        backgroundColor : '#ff0000',
        title : 'Open Camera',
        color : '#fff',
        width : 80,
        height : 50,
        left : 10,
    });
     
    frmcamera.addEventListener('click', function() {
        fireUpTheCamera();
    });
     
    controlview.add(frmcamera);
     
    var overlay = Ti.UI.createView({
        width : Ti.UI.FILL,
        height : Ti.UI.FILL,
        autorotate: true,
    }); 
    // Create an ImageView.
    var overlayImg = Ti.UI.createImageView({
        image : '/KS_nav_ui.png',
        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
    });
     
     
    overlayImg.addEventListener('click', function() {
        Ti.Media.takePicture();
    });
    overlay.add(overlayImg);
     
    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) {
                    anImageView.image = image;
                    //new_upload_profile_picture_update(anImageView.image);
                } 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 : false,
            overlay : overlay,
            mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
        });
    }
     
    win1.open();
    2. Click on open camera button. 3. Click on button in middle to take picture. 4. If you don't see the image (likely due to timob-16508), go to gallery and observe the image. Make sure it shows the right orientation 5. If you see the image, check to see if orientation is correct.
  11. Hieu Pham 2014-02-26

    master PR: https://github.com/appcelerator/titanium_mobile/pull/5392
  12. Vishal Duggal 2014-04-12

    Above PR closed. New PR https://github.com/appcelerator/titanium_mobile/pull/5597
  13. Neha Mittal 2014-04-23

    Verified fix with below environment: Appc Studio: 3.3.0.201404211130 SDK build: 3.3.0.v20140422163054 acs: 1.0.14 npm: 1.3.2 alloy: 1.4.0-dev CLI: titanium-3.3.0-dev titanium-code-processor:1.1.1-beta1 Xcode: 5.1.1 Osx: Mavericks(10.9.2) Device: Galaxy Nexus (4.1) Image displayed with correct orientation. Hence closing the issue.

JSON Source