Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-20319

iOS: Weird behavior after crop the image captured from camera

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Critical
    • Resolution: Fixed
    • Affects Version/s: Release 5.1.2
    • Fix Version/s: Release 6.0.0
    • Component/s: iOS
    • Labels:
      None
    • Environment:

      TI SDK 5.1.2
      IOS 9.2

    • Story Points:
      5
    • Sprint:
      2016 Sprint 18 SDK

      Description

      Description

      Simply run the following code in a default mobile app.
      Basically, the test case is 1. open a camera 2. capture a image 3. crop the image from step 2 (based on the layout of UI).

      Expect Result:

      The result image should be the same like inside the red rectangle area

      Actual Result:

      The result image is not as expected, and the orientation is wrong as well.

      Code

      var cameraOverLayColor = '#96000000';
      var imageView;
      var responseImg;
      var width, height, x, y;
       
      var win = Titanium.UI.createWindow({
      	backgroundColor:'white',
      	theme:'Theme.AppCompat.NoTitleBar',
      	layout:'vertical'
      });
       
      win.open();
       
      var cameraLbl = Ti.UI.createLabel({
      	top:20,
      	color:'blue',
      	text: 'Open Camera',
      	width : Ti.UI.SIZE,
      	height : Ti.UI.SIZE
      });
      win.add(cameraLbl);
       
      cameraLbl.addEventListener('click',doCamera);
       
      var mainContainer = Titanium.UI.createView();
       
      var scanner = Titanium.UI.createView({
      	top : '5%',
      	width : '80%',
      	height : '85%',
      	borderColor : 'red',
      	borderWidth : 5,
      	borderRadius : 1
      });
       
      var leftView = Ti.UI.createView({
      	left:0,
      	backgroundColor:cameraOverLayColor,
      	width : '10%',
      	height : '100%' 
      });
       
      var rightView = Ti.UI.createView({
      	right:0,
      	backgroundColor:cameraOverLayColor,
      	width :  '10%',
      	height : '100%' 
      });
       
      var topView = Ti.UI.createView({
      	top:0,
      	backgroundColor:cameraOverLayColor,
      	width : '80%',
      	height :'5%'
      });
       
      var bottomView = Ti.UI.createView({
      	bottom:0,
      	backgroundColor:cameraOverLayColor,
      	width : '80%',
      	height :'10%'
      });
       
      mainContainer.add(leftView);
      mainContainer.add(rightView);
      mainContainer.add(topView);
      mainContainer.add(bottomView);
      mainContainer.add(scanner);
       
       
      var takeButton = Titanium.UI.createButton({
      	color : '#fff',
      	left: 0,
      	font : {
      		fontSize : 20,
      		fontWeight : 'bold',
      	},
      	title : 'Take Picture'
      });
       
      var cancelButton = Titanium.UI.createButton({
      	color : '#fff',
      	right: 0,
      	font : {
      		fontSize : 20,
      		fontWeight : 'bold',
      	},
      	title : 'Cancel'
      });
       
      bottomView.add(takeButton);
      bottomView.add(cancelButton);
       
      takeButton.addEventListener('click', function() {
      	scanner.borderColor = 'blue';
      	Ti.Media.takePicture();
      });
       
      cancelButton.addEventListener('click', function() {
      	Ti.Media.hideCamera();
      });
       
       
      function doCamera(){	
      	Titanium.Media.showCamera({
      		saveToPhotoGallery : false,
      		
      		success : function(event) {
      			if (event.media) {
      				responseImg = event.media;
      				
      				Ti.API.info(responseImg.getWidth());
      				Ti.API.info(responseImg.getheight());
      				
      				// get detail CroppedDict
      				width = responseImg.getWidth() * 0.8;
      				height = responseImg.getheight() * 0.85;
      				x = responseImg.getWidth() * 0.1;
      				y = responseImg.getheight() * 0.05;
      				
      				Ti.API.info(width);
      				Ti.API.info(height);
      				Ti.API.info(x);
      				Ti.API.info(y);
      				
      				responseImg = responseImg.imageAsCropped({width: height, height: width, x: x, y: y});
       
      				if(!imageView){
      					imageView = Ti.UI.createImageView({
      						image : responseImg,
      						autorotate: true,
      						width : Ti.UI.SiZE,
      						height : Ti.UI.SIZE
      				});
      				win.add(imageView);
      			}else{
      				Ti.API.info("error");
      			}
       
      			Ti.Media.saveToPhotoGallery(responseImg,{
      				success: function(e) {
      					Titanium.UI.createAlertDialog({
          					buttonNames : ['OK'],
              				title:'Photo Gallery',
              				message:'Check your photo gallery for image.'
          				}).show();      
      				},
      				error: function(e) {
          				Titanium.UI.createAlertDialog({
          					buttonNames : ['OK'],
              				title:'Error saving',
              				message:e.error
          				}).show();
      				}
      			});
      			}else{
      				Titanium.UI.createAlertDialog({
      					title : 'Camera',
      					message:'Unexpected error',
      					buttonNames : ["OK"]
      				}).show();
      			}
      			scanner.borderColor = 'red';
      		},
       
      		cancel : function() {
      		},
      	
      		error : function(error) {
      			var a = Titanium.UI.createAlertDialog({
      				title : 'Camera'
      			});
      		
      			if (error.code == Titanium.Media.NO_CAMERA) {
      				a.setMessage('Please run this test on device');
      			} else {
      				a.setMessage('Unexpected error: ' + error.code);
      			}
      			a.show();
      		},
       
      		overlay : mainContainer,
      		showControls : false, 
      		mediaTypes : Ti.Media.MEDIA_TYPE_PHOTO,
      		autohide : true 
      	});
      }
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                hknoechel Hans Knöchel
                Reporter:
                sliang Shuo Liang
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-20912
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code