Phonegap: How to save an image taken and transformed into Base64 in the Bank?

Question

I take a photo with an android application and turn into Base64, I would like to know how to save this Base64 in the bank along with other information I have on the page...

This is my code that takes the photos and turns into Base64:

var pictureSource;   // picture source
var destinationType; // sets the format of returned value


document.addEventListener("deviceready",onDeviceReady,false);
document.addEventListener("deviceready",onDeviceReady2,false);


function onDeviceReady() {
  pictureSource=navigator.camera.PictureSourceType;
  destinationType=navigator.camera.DestinationType;

}

 function onDeviceReady2() {
 navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

function onPhotoDataSuccess(imageData) {

var smallImage = document.getElementById('smallImage');

smallImage.style.display = 'block';

smallImage.src = "data:img/jpeg;base64," + imageData; 

}


function capturePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
quality: 60,
destinationType: destinationType.DATA_URL,
allowEdit: true,
correctOrientation: true,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 3000,
saveToPhotoAlbum:1

 });
}

function onFail(message) {
alert('Failed because: ' + message);
}

This function will call through a button and it will send the data of a form, my location and the image taken(but I am sending the image wrong)

function enviar(){
  var formula = $('#formCliente').serialize();
  var lon = document.getElementById("myDivLo").innerHTML;
  var lat = document.getElementById("myDivL").innerHTML;
  var img = document.getElementById('smallImage').innerHTML;


 $.ajax({

  type:'POST',
  data:formula + ' &lat=' + lat  + "&lon=" + lon+ "&img=" + img ,

    url:'http://ip/teste/www/criar_incidente_camera.php',

 success: function(data){


 if(data == '' || data == 0){
     alert('Usuário ou senha incorreto' + data);   
     window.location = "";
 }

if(data == 1){
     window.location.href = "mapa_incidente.html";   
    }

    else{
         alert('outro' + data); 
       }


     }


  });

}
</script>

Entering values in the bank:

 $sql = 'INSERT INTO incidente (titulo, descricao, anonimo, tipo,   
 latitude, longitude, foto)';
 $sql .= 'VALUES (:titulo, :descricao, :anonimo, :tipo, :latitude, 
 :longitude, :foto)';

try {

$recebeConexao = $pdo->prepare($sql);

$recebeConexao->bindParam(':titulo', $_POST['titulo'], 
PDO::PARAM_STR);
$recebeConexao->bindParam(':descricao', $_POST['descricao'], 
PDO::PARAM_STR);
$recebeConexao->bindParam(':anonimo', $_POST['anonimo'], 
PDO::PARAM_STR);
$recebeConexao->bindParam(':tipo', $_POST['tipo'], PDO::PARAM_STR);
$recebeConexao->bindParam(':latitude', $_POST['lat'], PDO::PARAM_STR);
$recebeConexao->bindParam(':longitude', $_POST['lon'], 
PDO::PARAM_STR);
$recebeConexao->bindParam(':foto', $_POST['img'], PDO::PARAM_STR);



  $recebeConexao->execute();

  if($recebeConexao == true){

  $cadastro = 1;
 }else{
 $cadastro = 0;
}


} catch (PDOException $ex) {
echo "Erro inserção";
}



echo (json_encode($cadastro));

I’m using the BLOB Bank to store the image... Thank you!

Answer 1

In his job onPhotoDataSuccess you save the Base64 data on src of the element smallImage:

smallImage.src = "data:img/jpeg;base64," + imageData; 

But in function enviar you’re catching the innerHTML of this element and sending via Ajax:

var img = document.getElementById('smallImage').innerHTML;

$.ajax({

  type:'POST',
  data:formula + ' &lat=' + lat  + "&lon=" + lon+ "&img=" + img ,

I suppose then that this value is going empty, before it even reaches the server. Send the value of src, and this particular problem (of not saving anything in the bank) should solve (whether there are other problems or not with the BLOB field, I can’t say):

var img = document.getElementById('smallImage').src;

Answer 2

in a simplified way, you can store the image using inside the onPhotoDataSuccess function: localStorage.setItem("imageURI", imageURI);

and then just retrieve the value before making the AJAX call:

var img = localStorage.getItem("imageURI");

$.ajax({
type:'POST',
data:formula + ' &lat=' + lat  + "&lon=" + lon+ "&img=" + img ,