9 Answers

• Dan's answer and the link by Peter answer the question, but I thought I'd combine and expand on the two to make it easier for others.

  Create a 'container' view that holds the image and acts as a mask. Set the height/width to whatever you want the final, cropped image to be. borderRadius: 0 is key because it causes the masking so that the image doesn't overflow.

  var container =  Titanium.UI.createView({
    height:       100
    width:        100
    borderRadius: 0
    ...
  });
  

  Assuming the native resolution of the image is 200x300, then you can do one of two things depending on what you want the outcome to be:

  var image =  Titanium.UI.createImageView({
    url:    whatever
    height: 200
    width:  300
    });
  container.add(image);
  

  This will extract a 100x100 piece from the center of the image without scaling. Cropping 50px from the top/bottom and 100px from the left/right.

  var image =  Titanium.UI.createImageView({
    url:    whatever
    height: 100
    width:  150
  });
  container.add(image);
  

  This will scale the image to 100x150 and then the container will extract 100x100 from the center. In effect cropping 25px from the left/right, but the leaving the height intact. You'll probably want a helper function that calculates the scaled height/width values.

  Obviously, an Aspect Fill scaling method would be less hassle, but at least it works.

• I've put together a quick-and-dirty extension to Ti.UI.ImageView for iOS which adds support for aspect fit and aspect fill content modes as well as the clipsToBounds property. Here's an example of how this would be used to achieve the same effect described in Phil's post:

  var imageview_ex = require('com.obscure.imageview_ex');
  var imageView = imageview_ex.createImageView({
    height: 100,
    width: 100,
    hires: true,
    contentMode: 'aspectfill',
    clipsToBounds: true,
    image: whatever
  });
  window.add(imageView);
  

  The main advantage of this extension over the JavaScript method is that you don't need to know the aspect ratio of the image ahead of time in order to scale down and use an aspect fill.

• This seemed to work for me:
  http://developer.appcelerator.com/question/118677/masking-or-hiding-overflow-from-a-view.html#answer-207390

• I need this also.

• any updates on this? same issue here.

• any updates on this?

• Yes, I need this for my image thumb grid.

• You might want to create a view that holds the image, and calculate the image size to fill that view, and so a cropping will appear.

  let's say you have an image 200x300, and you set the view at 100x100 you will scale the image at 100x150 and put it inside the view, centered.

• Phil's answer works like a charm! Thanks. Needed this.

  Any tips though on how to create rounded corners though? borderRadius on either the container or image doesn't have any effect.