Phonegap: How to save an image taken and converted to base64 in the Bank?

0

I take a photo with an android application and transform into base64, I would like to know how to save this base64 in the database along with other information that I have on the page ...

This is my code that takes the photos and turns them 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 the wrong way)

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>

Inserting values into the database:

 $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 BLOB to store the image ... Thank you!

    
asked by anonymous 11.11.2015 / 22:37

2 answers

0

In your onPhotoDataSuccess function you save the base64 data in src of element smallImage :

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

But in the enviar function you are getting 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 this value is going empty before it even reaches the server. Send the value of src , and this particular problem (not saving anything in the database) should solve (if there are other problems or not with the BLOB field, I can not say):

var img = document.getElementById('smallImage').src;
    
12.11.2015 / 01:20
0

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

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 ,
    
13.02.2018 / 18:26