Titanium - Crop portion of image - image

Question

How would you crop a small portion of a big image (e.g area of an imageview visible in a transparent frame) in appcelerator titanium for both iOS and android? imageAs** functions won't work as they aren't supported below android 3.0 . Here is my code:
var win=Ti.UI.createWindow({backgroundColor: 'white'})
var ImageView = Titanium.UI.createImageView({
width:200, height:200,
});
var cropView = Titanium.UI.createView({
width: 150,
height: 150,
borderColor: 'red',
borderWidth: 1,
zIndex: 1,
});
var button= Ti.UI.createButton({
bottom: 30,
width: 60,
title: 'OK',
zIndex: 1,
})
win.add(cropView)
Ti.Media.openPhotoGallery({
PhotoGalleryOptionsType : Ti.Media.MEDIA_TYPE_PHOTO,
success: function(e){
ImageView.image=e.media;
win.add(ImageView)
}, });
button.addEventListener('click',function(e)
{
// crop the visible area
})
I am using iOS 5 and android 2.2. Thanks for your help.

Answer 1

Add ImageView to cropView (rather than to win), position and size imageView so that the portion you want displayed is displayed (using negative values for left and top), and then call cropView.toImage(). You can use the resulting blob in a new image view, save it to a file, email it as an attachment, whatever you want.
Any portion of the image outside of its parents bounds will be cropped, leaving only the portion you specify.

Answer 2

I have done some small changes and now its all functional. Cheers!! :)
var win = Ti.UI.createWindow({
backgroundColor : 'white'
})
var orignal = Titanium.UI.createImageView({
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
left:5
});
var ImageView = Titanium.UI.createImageView({
width : 200,
height : 200
});
var cropView = Titanium.UI.createView({
top : 10,
width : 150,
height : 150,
borderColor : 'lime',
borderWidth : 1,
zIndex : 1,
left:150
});
var button = Ti.UI.createButton({
bottom : 30,
width : 60,
title : 'CROP',
zIndex : 1,
});
win.add(button);
Ti.Media.openPhotoGallery({
PhotoGalleryOptionsType : Ti.Media.MEDIA_TYPE_PHOTO,
success : function(e) {
ImageView.image = e.media;
orignal.image=e.media;
cropView.add(ImageView);
win.add(cropView);
win.add(orignal);
},
});
var CropedImageView = Titanium.UI.createImageView({
top : 200,
width : cropView.width,
height : cropView.height,
left:150
});
button.addEventListener('click', function(e) {
cropView.borderColor='transparent';
CropedImageView.image = cropView.toImage();
win.add(CropedImageView);
});
win.open();

Answer 3

I learnt some of this while my stay at Oodles Technologies.
Here's my contribution :
In this example you will see how to crop image in iOS Titanium.
To crop a image first create scroll view, define its maxZoomScale, minZoomScale.
maxZoomScale:-
Maximum Scaling factor of the scrollable region and its content.
minZoomScale:-
Minimum Scaling factor of the scrollable region and its content
maxZoomSale and minZoomScale we can adjust according to required.
then we have to add image view inside scrollview, then we can zoom in and zoom out image, to crop a image just need to click on crop button.
var window = Ti.UI.createWindow({
backgroundColor : 'white'
});
var scrollView = Ti.UI.createScrollView({
height : 260,
width : Ti.UI.FILL,
maxZoomScale : 4.0,
minZoomScale : 1.0,
zoomScale : 1.0,
});
window.add(scrollView);
var imageView = Ti.UI.createImageView({
height : scrollView.height,
width : scrollView.width,
backgroundColor : "transparent",
anchorPoint : {
x : 0.5,
y : 0.5
},
image : 'Default-568h#2x.png',
});
scrollView.add(imageView);
var button = Ti.UI.createButton({
top : 20,
title : 'Crop Button'
});
window.add(button);
button.addEventListener('click', function(e) {
button.hide();
var cropimage = scrollView.toImage();
var cropImageView = Ti.UI.createImageView({
top : 20,
height : 120,
width : 120,
image : cropimage
});
window.add(cropImageView);
});
window.open();