Titanium Community Questions & Answer Archive

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

Crop/clip imageView

Is there any way to crop or clip and imageView?

I have both landscape and portrait images and I'm going to resize them down to a grid and then show them, and they have to be the same dimension, let say 50x50 without being stretched.

— asked August 10th 2010 by Sindre Sorhus
  • clip
  • clipping
  • crop
  • image
  • imageview
  • view
0 Comments

2 Answers

  • You can crop an image without using an external module. Here's how to crop 100x100 pixels from an image starting at position 200,200 and then display the cropped image in an image view:

    // Here's our base (full-size) image. 
    // It's never displayed as-is.
    var baseImage = Titanium.UI.createImageView({
        image:'flower.jpg',
        width:512, height:512,
    });
    
    // Here's the view we'll use to do the cropping. 
    // It's never displayed either.
    var cropView = Titanium.UI.createView({
        width:100, height:100
    });
    
    // Add the image to the crop-view.
    // Position it left and above origin.
    cropView.add(baseImage);
    baseImage.left=-200;
    baseImage.top=-200;
    
    // now convert the crop-view to an image Blob
    var croppedImage = cropView.toImage();
    
    // make an imageView containing the image Blob
    var imageView = Titanium.UI.createImageView({
        image:croppedImage,
        width: 100, height:100
    });
    
    // add it to the window
    win1.add(imageView);
    

    It would be fairly trivial to make this into a function to crop any image and return either a Blob containing the cropped image or an image view object containing the cropped image.

    — answered May 25th 2011 by smaccona smaccona
    permalink
    3 Comments
    • Thanks dear….it was really a great idea

      — commented March 16th 2012 by Umar Hadyatullah
    • i would be really curious on how the performance would be, how soon it would crash, if you had a lot of images. How many images are you cropping ?
      I'd like to do something like this but depending on camera roll, it could be thousands.

      — commented July 11th 2012 by dw fresh
    • Its great but it directly crops the image and display. How to show preview of the cropping area to the user and then perform the cropping action on a button click? I really need this. Please someone help.

      — commented December 12th 2012 by Muhammad Qasim
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.