ImageView aspect ratio problem - Bug?

You must Login before you can answer or comment on any questions.

I am trying to change the image of imageview by choosing a photo from gallery. First time i create the view, I set a fixed height or width and it loads the first image with correct ratio. However, when i set a new image, using setImage, the photo is loaded with a distorted image.

I need is to load both portrait, and landscape oriented photos into a view correctly. I appreciate if you can help me solve this problem.

var iView;

function create() { var self = Ti.UI.createWindow({});

self.hideNavBar();

iView = Ti.UI.createImageView({
    top:0,
    //left:0,
    width:240,
    //height:322,
    image:"images/photo3.jpg"
});
self.add(iView);

var btnOpenGallery = Ti.UI.createButton({
    top:330,
    width:200,
    height:30,
    title:"Select Photo"
});
btnOpenGallery.addEventListener("click", btnOpenGallery_click);
self.add(btnOpenGallery);

var btnSavePhoto = Ti.UI.createButton({
    top:370,
    width:200,
    height:30,
    title:"Save Photo"
});
btnSavePhoto.addEventListener("click", btnSavePhoto_click);
self.add(btnSavePhoto);

Ti.API.info(testvar);


return self;

}

function btnOpenGallery_click(e) { Ti.Media.openPhotoGallery({ success: function(e) { iView.image = e.media; } }); }

function btnSavePhoto_click(e) { Ti.Media.saveToPhotoGallery(iView.toBlob(), { success:function(e) { alert("Photo Saved"); } }) }

exports.create = create;

2 Answers

Accepted Answer

try this demo code, this is a working code from a project chack this:

var imageView = Ti.UI.createImageView({
height:'auto',
width:'auto',
size:{
    height: // set whatever you want
    width : // set whatever you want
    },
canScale : true
image : // image
});

Hi, thanks for the answer, i haven't tried it yet, but i found another workaround. Instead hoping for auto resizing of photo with correct aspect ratio, i managed to get height and width of the selected photo from the gallery, and resize the imageview to the correct width and height.

Here is my solution: 

var image = e.media;
var height = image.height;
var width = image.width;
 
if(width > height)
{
    var ratio = width / 320;
    var previewWidth = 320;
    var previewHeight = height / ratio;
 
    iView.setHeight(previewHeight);
    iView.setWidth(previewWidth);
    iView.setImage(image.imageAsResized(previewWidth, previewHeight));
 
}
else
{
    var ratio = height / 320;
    var previewHeight = 320;
    var previewWidth = width / ratio;
 
    iView.setHeight(previewHeight);
    iView.setWidth(previewWidth);
    iView.setImage(image.imageAsResized(previewWidth, previewHeight));
}

Your Answer

This question has been locked and cannot accept new answers.