How to grab image from camera in Base64 (using phonegap) and send to server via JSON with Angularjs?

Question

I’m getting the hang of imgEnviar, who receives the base64 coming from the camera, and inserting into the JSON and sending to the server with $http with Angularjs. I want to know if it’s really possible or if there’s a better way to do it, because I need to send the camera image along with the form data.

Camera part with Cordova plugin

var imgEnviar;
function capturarImagem(){
   navigator.camera.getPicture(onSuccess, onFail,
                    {
                        destinationType : Camera.DestinationType.DATA_URL,
                        sourceType : Camera.PictureSourceType.CAMERA
                    }
                );
            }

            function onSuccess(imageURL) {
                var image = document.getElementById('htmlImagem');
                image.src = "data:image/jpeg;base64," + imageURL;
                //var imgEnviar = JSON.stringify(imageURL); 
                imgEnviar = image.src;
            }

            function onFail(message) {
                alert('Erro: ' + message);
            }
pate do agularJS


app.controller('formularioChamado', function($scope, $http) {
 $(document).ready(function() {
  $('select').material_select();
});

 $scope.enviarForm = function(chamado){


  $http({
    url: 'https://modulosamu.herokuapp.com/chamado/store',
    method: 'POST',
    data: {

      descricao: $scope.chamado.descricao,
      img: imgEnviar,
      latitude: latitude,
      longitude: longitude,


    },
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'

    }
  }).
  success(function (data) {
    $scope.success = true;
    alert(data);
    $scope.user = {};
  }).
  error(function (data) {
    $scope.error = true;

  }); 

}

});

Answer 1

You can do it, but you’ll have to set up some things more like:

navigator.camera.getPicture(onSuccess, onFail, { 
        quality         : 25, 
        allowEdit       : false,
        //destinationType : Camera.DestinationType.FILE_URI, 
        destinationType : Camera.DestinationType.DATA_URL, 
        targetWidth     : 200,
        targetHeight    : 200,
        sourceType      : Camera.PictureSourceType.CAMERA, // Camera.PictureSourceType.PHOTOLIBRARY
        encodingType    : Camera.EncodingType.JPEG
    });

Quality the smaller the better to send, width/height same idea, then just send as string and write to the bank.