Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Pictures taken with Camera - orientation / rotation

I let users take an image from the camera or the photo gallery and upload them to an online album - everything works flawlessly expect for that photos captured in portrait mode (vertical) are showing up sideways / landscape. How do you know what orientation the photo was taken at? Is there away to automatically handle the rotation?

— asked April 26th 2010 by Brandon Corbin
  • camera
  • landscape
  • orientation
  • photogallery
0 Comments

11 Answers

  • I have come up with a solution that seems to be working. After I take the photo, I create a new ImageView with the results of the camera/photogallery action. I then do some scaling there - and use the imageView.getImage() to get the image that I send to my server. This method gives me the picture how it was taken by the camera…

    — answered May 6th 2010 by Brandon Corbin
    permalink
    2 Comments
    • This is the solution I used as well. One correction: the method name is imageView.toImage()

      — commented November 5th 2010 by Ming-Gih Lam
    • this worked for me but only for iOS :(

      — commented September 29th 2014 by Redouane BOUDELLA
  • I also have this question. The thing i did was to check the size of the picture, if you do that you can see if it's taken in landscape mode or portrait. But i really think it's bad to relay on the size of the image, it should be some other way?

    — answered April 28th 2010 by Jimp Pimps
    permalink
    0 Comments
  • On your server, you can also read the EXIF data (there are plenty of libraries out there for many languages) where you can see the orientation used in the photo.

    Then it's pretty simple to write code to rotate the incoming image file on your server. (again, there are plots of examples out there on how to do this in various languages)

    But I do agree that it would be great to have this data available beforehand.

    Also, it would be great to have some basic imageBlob manipulation for this within Titanium.

    tht,
    kosso

    ps: just wait until you have to detect orientation of video! sheesh! that took me ages to solve! :)

    — answered May 20th 2010 by Kosso
    permalink
    0 Comments
  • Hey Brandon - Just curious if you (or anyone else) made any further headway with this.

    I have tried the same solution with the following code:

    Titanium.Media.showCamera({
            success:function(e){
                          var img = Ti.UI.createImageView({
                                  image: e.media,
                                  transform: Ti.UI.create2DMatrix().rotate(90)
                          });
    
                         uploadImageToServer(img.toImage()); //psuedocode
                    }
    });
    

    the problem i get is that the rotation is OK but the image is completely skewed in terms of diminsions - it actually looks squished.

    Anyone have any thoughts?

    — answered January 27th 2011 by Bert Grantges
    permalink
    0 Comments
  • I cannot explain why, but this works for me no matter how I hold the camera.

    success:function() {
      var imageFile = event.media;
      var imageAsTaken = Ti.UI.createImageView({
        image: imageFile
      });
      imageFile = imageAsTaken.toImage();
      // do other processing...
    },
    

    I would love to know how this works.

    — answered June 12th 2011 by Micah Alcorn
    permalink
    3 Comments
    • If I use the above code image blacked out. Please help.

      — commented November 2nd 2012 by sumit gulati
    • Did you tried use toBlob instead of toImage? I tried to use toBlob but still getting a horizontal image. I am using toBlob because i have to encode base64 on the image.

      — commented November 15th 2012 by TAN KENG LEONG
    • @TAN KENG LEONG did you find a solution? I have to convert my image to base64 also and need the to blob method

      — commented July 14th 2014 by user 4683
  • I encountered this problem when resizing images on android. When resizing images on Android, the EXIF data gets lost. Titanium then assumes that pictures are taken in landscape mode, which means that you image will be rotated. The ImageView approach is something that helps for some, however not for me, so I had to make a rotation tool.

    — answered December 5th 2013 by Roy de Bokx
    permalink
    0 Comments
  • – BUMP –
    was this issue ever resolved in the framework

    — answered February 17th 2011 by Aaron Saunders
    permalink
    0 Comments
  • Can anyone post working code for this? I have been fighting with getting the image orientation and size set properly to display… a working sample would be appreciated.

    — answered April 4th 2011 by Ray Belisle
    permalink
    0 Comments
  • Bump….

    anyone have this working yet and willing to share an example?

    thanks…
    ~Brian

    — answered June 8th 2011 by Brian Dittmer
    permalink
    0 Comments
  • Also very interested in this.

    It would also help to just be able to read the EXIF data of the image.
    My images come from a camera, are not taken with the device itself.

    Thanks for any help!

    — answered December 18th 2011 by Michael Ionita
    permalink
    0 Comments
  • There is a exif library in javascript.

    — answered November 5th 2012 by Rainer Schleevoigt
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.