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?
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.
-
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();
-
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.
-
Also might be nice if we could edit posts in this forum/board :-P
-
There is a patch that does image cropping:
http://gist.github.com/621367 -
I must add .toImage() is an expensive function to call.
-
This may also be useful:
$.image.addEventListener('load', function(e){ var imgOffset = -(Math.round($.image.size.height) / 4); $.image.top = imgOffset; });
-
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 -
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.
-
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