Impossible to resize image taken by camera

cordova
1

I am with this terrible problem. I take a picture with the camera of the device, try setting the width and height of the image, still, to try to upload it to my server, the image weighs more than 5.4 MB. Try using the plugin and setup ImageResizer my image, this worked, gender an image of no more than 3 KB but blank, I do not take my picture.

$scope.publicarView = function(){
 var server =   URL_BASE+'addView/'+sessionService.get("user_id")+"/"+$scope.data.content+"/null/"+$scope.latitud+"/"+$scope.longitud+"/"+1;

 var trustAllHosts = true;

 var ftOptions = new FileUploadOptions();
 ftOptions.fileKey = 'file';
 ftOptions.fileName = $scope.imagen.substr($scope.imagen.lastIndexOf('/') + 1);
 ftOptions.mimeType = 'image/jpeg';
 ftOptions.httpMethod = 'POST';

 console.log(ftOptions);

 var options = {
  uri: $scope.imagen,
  quality: 90,
  width: 400,
  height: 400};

 window.ImageResizer.resize(options,
function(image) {
   // success: image is the new resized image
    $cordovaFileTransfer.upload(encodeURI(server), image, ftOptions, trustAllHosts)
    .then(function(result) {
      console.log(result)
    }, function(err) {
      // Error
      console.log(err);
    }, function (progress) {

      });
}, function() {
  // failed: grumpy cat likes this function
});
}
2

Do you have an example of an uploaded image? i.e. a URL to an uploaded image I could take a look at?

3

Try to create a canvas, put the image there and resize. I have an example for creating thumbnails (opencamera uses getThumbnail):

 $scope.getThumbnail = function(url, callback, outputFormat){
         var canvas = document.createElement('CANVAS'),
             ctx = canvas.getContext('2d'),
             img = new Image();
 
         img.crossOrigin = 'Anonymous';
 
         img.onload = function(){
             var dataURL;
             var cw = img.width, ch = img.height, cx = 0, cy = 0;
             cw = img.width;
             ch = img.width;
             
             canvas.height = img.height * 0.1;
             canvas.width = img.width * 0.1;
     
             ctx = canvas.getContext('2d');
    
             ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
     
             dataURL = canvas.toDataURL(outputFormat);
             callback(dataURL);
             canvas = null; 
         };
         img.src = url;
     };
     
     
    $scope.opencamera  = function() {

        var options = {
          quality: 90,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.CAMERA,
          allowEdit: false,
          encodingType: Camera.EncodingType.JPEG,
          targetWidth: 800,
          targetHeight: 600,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: true,
          cameraDirection: 1,
          correctOrientation: 1
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
    
          var img = "data:image/jpg;base64," + imageData;
          
          $scope.update.foto_base64 = img;
          
          $scope.getThumbnail(img, function(thumbnail){
             //you have your thumbnail here !
          });
        }, function(err) {
          // error
        });
    };
4

At the end I could make it work. Do not served a canvas so I uploaded which such file. The code was good, what was bad was the picture he took with the camera. Now what surprises me is that with properties targetWidth and targetHeight not work and I had to use a plugin to solve it. @jawache

5

@sioesi… hmmm strange, i just did this yesterday and camera plugin is definitely returning me a smaller image depending on my targetWidth/height (in iOS not checked in Android).

6

Good thing down 5.4 MB image 40 KB :smile: :smile: thanks for your help!