I am trying to crop an image in Android using Titanium. I have a view which indicates the selected area, I want to move that view to the selected position in screen. I was able to make it working partially using a commonJS module as shown below.
var CameraPreview = function(cameraImage, callbackObj){ var platformHeight = Ti.Platform.displayCaps.platformHeight; var platformWidth = Ti.Platform.displayCaps.platformWidth; var CROP_VIEW_HEIGHT = 160; var CROP_VIEW_WIDTH = 320; var BOTTOM_BAR_HEIGHT = 70; //Window contains all the controls var _previewWindow = Ti.UI.createWindow({ navBarHidden : true, backgroundColor : '#fff', }); var _cropScreenContainer = Ti.UI.createView({ height : '100%', width : '100%', backgroundColor : '#fff' }); _previewWindow.add(_cropScreenContainer); var _previewImage = Ti.UI.createImageView({ width : platformWidth, image : cameraImage, top : 0, touchEnabled : false, autorotate : true }); _cropScreenContainer.add(_previewImage); var _viewPositions = _getPositions(); //Used to get the dimensions of the crop views var _topView = Ti.UI.createView({ backgroundColor : '#000000', height : _viewPositions.initialViewHieght, top : 0, opacity : 0.6, touchEnabled : false, }); _cropScreenContainer.add(_topView); //Crop view is used to crop the image displayed var _cropView = Ti.UI.createView({ borderColor : '#ffffff', borderWidth : 1, width : CROP_VIEW_WIDTH, height : CROP_VIEW_HEIGHT, touchEnabled: false, top : _viewPositions.initialViewHieght }); _cropScreenContainer.add(_cropView); var _bottomView = Ti.UI.createView({ backgroundColor : '#000000', height : _viewPositions.initialViewHieght, touchEnabled : false, top : _viewPositions.initialViewHieght + CROP_VIEW_HEIGHT, opacity : 0.6 }); _cropScreenContainer.add(_bottomView); //Bottom bar containing the camera buttons and cancel button var _bottomBar = Ti.UI.createView({ width : '100%', height : BOTTOM_BAR_HEIGHT, bottom : 0, backgroundColor : '#000000' }); //Retake button var _retakeButton = Ti.UI.createLabel({ text : 'Cancel', color :'#ffffff', left : '3%', width : Ti.UI.SIZE }); //Button to chose the photo var _chooseButton = Ti.UI.createLabel({ text : 'Choose', color :'#ffffff', right : '3%', width : Ti.UI.SIZE }); _bottomBar.add(_retakeButton); _bottomBar.add(_chooseButton); _previewWindow.add(_bottomBar); _retakeButton.addEventListener('click', _retakePhoto); _chooseButton.addEventListener('click', _onUsePhoto); _cropScreenContainer.addEventListener('click', _moveCropViewToPosition); _previewWindow.open(); /** * Used to move the cropview to the selected position */ function _moveCropViewToPosition(event){ var newPoints = _cropScreenContainer.convertPointToView( { x : event.x, y : event.y } , _previewImage ); _cropView.top = newPoints.y; //Top position is set here. but it doesn't work properly var toast = Ti.UI.createNotification({ message: "You have clicked at the point in cropscreen is " + newPoints.y + ' cropView top is ' + _cropView.rect.y }); toast.show(); } /** * Used to re open the gallery */ function _retakePhoto(){ _previewWindow.fireEvent('showCamera'); } /** * Used to crop the image in the required resolution and retruns to the success callback */ function _onUsePhoto(){ var _cropViewTop = _cropView.rect.y*2; var ImageFactory = require('ti.imagefactory'); var _selectedImage = _cropScreenContainer.toImage(); var newBlob = ImageFactory.imageAsCropped(_selectedImage.media, {width:CROP_VIEW_WIDTH, height:CROP_VIEW_HEIGHT, x :0, y: _cropViewTop, format : ImageFactory.PNG }); callbackObj.success(newBlob); _previewWindow.close(); } /** * Returns the top of shadow view used above and below the crop view */ function _getPositions(){ var _totalHeight = platformHeight - BOTTOM_BAR_HEIGHT; var _topHeight = (_totalHeight-CROP_VIEW_HEIGHT)/4; var _cropViewContainerHeight = (2 * _topHeight) + CROP_VIEW_HEIGHT; return { initialViewHieght: _topHeight, totalHeight : _totalHeight }; } return _previewWindow; }; module.exports = CameraPreview;In the above code
_moveCropViewToPosition()
function is used to position the view. But it works properly till half of the screen!! So my question is,
how can I move the white box and crop the image properly?
How can I restrict the white box to the boundary of image?
Any help will be apreciated.