TItanium - How to take pictures in the right orientation using an overlay? - ios

Question

I'm working on Titanium SDK 3.1.1 and deploying for iOS. What I'm trying to do is to open the camera with an overlay, take a picture, crop the picture and save it. But I'm having trouble to take a picture with an overlay.
If I take a picture in portrait, the image returned is taken in landscape. When taking it in landscape, the result will be a portrait image. No idea why is this happening.
My overlay is really simple, it has three views that act as buttons, one of them closes the camera, another takes the picture and the other opens the gallery (which throws an exception, but that's a problem for a different question):
var testOverlay = Ti.UI.createView({
bottom:0,
height:200,
width: platformWidth,
height : platformHeight,
left:0
});
//just a black view on top to limit upper area
var topbarView = Ti.UI.createView({
width: platformWidth,
height : resultHeight,
top : 0,
left : 0,
backgroundColor : '#363636',
opcatity : 0.6
});
testOverlay.add(topbarView);
// just a black view on bottom to limit bottom area and display custom controls
var bottombarView = Ti.UI.createView({
width: platformWidth,
height : resultHeight,
bottom : 0,
left : 0,
backgroundColor : '#363636',
opcatity : 0.6
});
testOverlay.add(bottombarView);
// container view for custom controls
var cameraButtonHolder = Ti.UI.createView({
width : Ti.UI.FILL,
height : 80 + dpi,
bottom : 0
});
bottombarView.add(cameraButtonHolder);
//a view to close camera
var cancelCameraButton = Ti.UI.createView({
width:80 + dpi,
height:80 + dpi,
left:0,
backgroundColor:"pink"
});
// a view to take picture
var takePictureButton = Ti.UI.createView({
width : 80 + dpi,
height : 80 + dpi,
backgroundColor : 'blue'
});
//a view to open gallery
var galleryButton = Ti.UI.createView({
width:80 + dpi,
height:80 + dpi,
right:0,
backgroundColor:"green"
});
cameraButtonHolder.add(cancelCameraButton);
cameraButtonHolder.add(takePictureButton);
cameraButtonHolder.add(galleryButton);
// event handler to close camera
cancelCameraButton.addEventListener('click', function(e){
Ti.Media.hideCamera();
parentWindow.closeView();
});
//event handler to take picture
takePictureButton.addEventListener('click', function(e){
Ti.Media.takePicture();
});
// event handler to open gallery
galleryButton.addEventListener("click", function(e){
Titanium.Media.openPhotoGallery({
success : function(event) {
Ti.API.info('Returning from gallery');
var filename = 'baby_temp.png';
var tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, (filename));
tmp.write(event.media);
var blob = tmp.read();
Ti.App.fireEvent(callback, {
media_type : 'photos'
});
},
cancel : function() {
Ti.API.info('Cancelled');
},
error : function(error) {
// if error, show message
var message = 'Unexpected error: ' + JSON.stringify(error);
Ti.UI.createAlertDialog({
title : 'Camera',
message : message
}).show();
},
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]
});
});
My function that opens the camera and handles the photo looks like this:
function showCamera() {
Ti.Media.showCamera({
success : function(event)
{
var tmp;
var mediaType;
if (event.mediaType.indexOf('PHOTO') > -1 || event.mediaType.indexOf('image') > -1)
{
tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.png'));
mediaType = 'photos';
}
else
{
tmp = Ti.Filesystem.getFile(Ti.Filesystem.tempDirectory, ('baby_temp.mp4'));
mediaType = 'videos'
}
Ti.App.Properties.setString('mediaType', mediaType);
if (mediaType == "photos")
{
//If it's a picture then crop it and save it
var image = event.media;
var imageWidth = image.width;
var imageHeight = image.height;
var scaleX = 0;
var scaleY = (imageHeight - imageWidth) / 2;
if(imageHeight > imageWidth)
{
scaleX = (imageWidth - imageHeight) / 2;
scaleY = 0;
}
var croppedImage = image.imageAsCropped({
x : scaleX,
y : scaleY,
width : imageWidth,
height : imageWidth
});
tmp.write(croppedImage);
}
else
{
// video
tmp.write(event.media);
}
Ti.App.fireEvent('changeCreateMoment', {
media_type : mediaType
});
Ti.Media.hideCamera();
},
cancel : function() {
// hide camera and close the window
Ti.Media.hideCamera();
parentWindow.closeView();
},
error : function(error) {
// if error, show message, hide camera and close window
var message;
if (error.code == Ti.Media.NO_CAMERA)
{
message = 'Device does not have camera capabilities';
}
else
{
message = 'Unexpected error: ' + error.code;
}
Ti.UI.createAlertDialog({
title : 'moments',
message : message
}).show();
Ti.Media.hideCamera();
parentWindow.closeView();
},
overlay:testOverlay,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO, Ti.Media.MEDIA_TYPE_VIDEO],
videoMaximumDuration : 10000,
videoQuality : Titanium.Media.QUALITY_MEDIUM,
saveToPhotoGallery : false,
showControls : false,
autohide : false
});
}
I have no idea why the photo is taken in landscape instead of portrait and vice versa. Am I missing a property in my showCamera function call? Why am I getting a photo like this?