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 imageView

I was curious how I can crop an image. I searched Q&A without success.

I have an image that I want to set to a certain width. When I set the width however, the image is being resized - the height is automatically adjusted as well.

As such, even though I specify a height, that value is being ignored.

Is cropping an imageView not possible?

— asked October 22nd 2010 by Ingmar Koecher
  • imageview
  • iphone
  • mobile
0 Comments

10 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 a Blob containing the cropped image.

    — answered May 25th 2011 by smaccona smaccona
    permalink
    2 Comments
    • Very good solution, thanks :)

      — commented May 16th 2012 by David Pozo
    • Tried this on Android.But it is not working.The toImage method is returning a dictionary object.Also tried assigning the media property of this object as suggested in some answers on this forum.Even that is not working. Using Titanium SDK version 3.1.1.v20130520171545.Secondly I used croppedImage method which again is not working if I give the height of the area to be cropped greater than some percentage

      — commented May 31st 2013 by Mukund Samant
  • Using Alloy, rushed, you could do it like this;

    <ScrollView id="crop" height="100" contentWidth="250" contentHeight="auto">
        <ImageView id="image" image="some_image.jpg" width="250" />
    </ScrollView>
    

    Hope that helps someone, no need for .toImage();

    — answered March 27th 2013 by Loque Kindle
    permalink
    0 Comments
  • Thank you, I'm not sure how I would add that patch though. I found a work-around by setting the background of a label to my image, and then setting the label size accordingly. This is essentially cropping.

    This actually works like a charm. I needed this to create a horizontal gauge, and using that technique it works.

    Thanks.

    — answered October 22nd 2010 by Ingmar Koecher
    permalink
    2 Comments
    • Can you paste the code you used to make this work? I tried the same solution but the background image simply scales to fit the label.

      — commented December 1st 2010 by Ian Maddox
    • whow, did not think of this one.. was all ready diving in the module extension stuff… but I'm for sure gonna try this one :)

      — commented February 10th 2011 by Alexander van der Werff
  • Also might be nice if we could edit posts in this forum/board :-P

    — answered March 27th 2013 by Loque Kindle
    permalink
    0 Comments
  • There is a patch that does image cropping:
    http://gist.github.com/621367

    — answered October 22nd 2010 by Martijn Pannevis
    permalink
    1 Comment
    • how install the module?

      — commented December 15th 2010 by ben roe
  • I must add .toImage() is an expensive function to call.

    — answered March 27th 2013 by Loque Kindle
    permalink
    0 Comments
  • This may also be useful:

    $.image.addEventListener('load', function(e){
        var imgOffset = -(Math.round($.image.size.height) / 4);
        $.image.top = imgOffset;
    });
    
    — answered March 27th 2013 by Loque Kindle
    permalink
    0 Comments
  • if you are using sdk 3.0.2.GA, please use Ti.Blob.imageAsCropped to crop the image, please refer to the doc: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Blob-method-imageAsCropped

    — answered April 8th 2013 by kent hao
    permalink
    0 Comments
  • Thanks for the heads up Kent - unfortunately there is no documentation on how to actually use that method, or how to us Ti.Blob for images.

    My first problem with trying to use that method would be using Ti.Blob instead of a Ti.UI.ImageView to display an image.

    — answered April 8th 2013 by Loque Kindle
    permalink
    0 Comments
  • Guess it is something like?:

    // Create blob element with image path
      // Listen to load event?
      // Do any image manipulation (cropping etc...)
      // Create imageView with path to image as blob reference
      // Display imageView in UI
    
    — answered April 8th 2013 by Loque Kindle
    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.