Black stripes at the top and bottom of images

ionic-v1
#1

I’m using cordovaCamera plugin and when I’m taking a landscape picture the result is a picture with black strips at the bottom and top of it.

The only css applied to the image is width: 100% so I guess the css won’t be the solution.
When taking image portrait, it works just fine.

Here’s an example of the black stripes

21no7l1.jpg640×640

#2

Can you share the code you used for the camera?

#3

Here’s the option initialization

 options = {
            quality: 50,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit: true,
            targetWidth: 640,
            targetHeight: 640,
            encodingType: Camera.EncodingType.JPEG,
            mediaType: 0,
            correctOrientation: false,
            saveToPhotoAlbum: false,
            popoverOptions: CameraPopoverOptions,
            cameraDirection: 1
          };

The function:

 this.takePhoto = function() {
    var d = $q.defer();
    $cordovaCamera.getPicture(options).then(function(imageUri) {
      if (self.dp == "iOS") {
        selfie.image = imageUri;
        d.resolve("true");
      } 
    }, function(err) {
      if (err == "no camera available") {
        d.resolve("simulator");
      } else {
        d.resolve("false");
      }
    });
    return d.promise;
  }
#4

So these lines set the restraints for the height and width, try removing them.

#5

I’ve removed this lines and I get the same result

#6

Hmm, I just tried this out using some slightly different code

.controller('MainCtrl', function($scope, $cordovaCamera, $ionicPlatform) {
  $scope.lastPhoto = '';
  var options = {
    quality: 75,
    destinationType:1, 
    // sourceType: Camera.PictureSourceType.CAMERA,
    saveToPhotoAlbum: false
  };
  $ionicPlatform.ready(function() {
    $scope.getPhoto = function() {
      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.lastPhoto = imageData;
        console.log("data:image/jpeg;base64," + imageData);
      }, function(err) {});
    };
  });
});

      <button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
      <img class="photo" ng-src="{{lastPhoto}}">


.photo{
  width: 100%;
  display: block;
  border: thin solid #eee
}

And I didn’t have the issue