When obtaining an image of the camera in base64, when sending it in a post method the server does not recognize it

Ionic Framework ionic-v3
1

Hi all, I encounter a problem that I can not solve, with the camera plugin, I get the gallery image and I want to send it to a laravel service in base64, that happens, everything works fine but when I send the service, it returns me A mistake but if I prove exactly with the same data in postman, the service makes the image insertion all well, do you know how can I do this? I thank you here are the parts of the functionality :slight_smile: .
the method:

public accessGallery(){
   Camera.getPicture({
     quality: 75,
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
     destinationType: Camera.DestinationType.DATA_URL,
     encodingType: Camera.EncodingType.JPEG,
     targetHeight : 500,
     targetWidth : 500,
     
    }).then((imageData) => {
      console.log("imagen en base 64: ", imageData);
      this.imgbs64 = imageData;
      // console.log(" la imagen mimificada: ",this.imgbs64);
       
      this.base64Image = 'data:image/png;base64,'+imageData;
     }, (err) => {
      console.log(err);
    });
  }

the service method

registrarObservación(all parametrs){
console.log("getting alumnos from a group with id ----> "+id);
    console.log("lA FOTOOOOOOOO ",img);

    let formPayload = new URLSearchParams();
    formPayload.set('id', id);
    formPayload.set('asignacion_id', asignacion_id);
    formPayload.set('periodo_id', periodo_id);
    formPayload.set('fecha_observador', fecha_observador);
    formPayload.set('tipoobservacion_id', tipoobservacion_id);
    formPayload.set('titulo_observacion', titulo_observacion);
    formPayload.set('desc_observacion', desc_observacion);
    formPayload.set('id_matricula', id_matricula);
    formPayload.set('hora_observacion', hora);
    formPayload.set('soporte_observacion', img);//<-the base 64 string

var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post('http://13.84.145.144/api/v1/enviarobservacion',formPayload.toString(),{headers: headers})
    .timeout(15000)
    .map((response: Response) => {
      let results = response.json();
      console.log(response.json());
      if (results.mensaje) {
        return results.mensaje;
      } else{
        return null;
      }
    });
  }

the error:
NotReadableException in AbstractDecoder.php line 335: Image source not readable

note

:
If I copy the base64 from the error, the one that goes in the headers is the same “” I printed in console, and decode each of them base64 code anted from sending the request decodes me, but the one I copied from Error can not be decoded,

2

Hello!

do you have any solution for this issue ? I have this same error. My String base64 it is saved in the database by means of the api rest however the saved string is invalid or corrupt.

I would appreciate your help with this issue

3

Hello there. Try the code bellow:

 private callGallery() {
        const options: ImagePickerOptions = {
        maximumImagesCount: 1,
        quality: 100
    }

    this.imagePicker.getPictures(options).then((results) => {
        console.log(results[0]);
        this.convertToDataURLviaCanvas(results[0], "image/jpeg").then(data => {
            console.log(data);
            let img = <String>data;
            this.imgProvider.save(img).subscribe(data => {
                console.log(data);
            }, err => {
                console.log(err);
            });
        });

    }, (err) => { });
}


convertToDataURLviaCanvas(url, outputFormat) {
    return new Promise((resolve, reject) => 
    {
        let img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function () {
            let canvas = <HTMLCanvasElement>document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                dataURL;
            canvas.height = 1000;
            canvas.width = 1000;
            ctx.drawImage(img, 0, 0);
            
            dataURL = canvas.toDataURL();
            //callback(dataURL);
            canvas = null;
            resolve(dataURL);
        };
        img.src = url;
    });
}
4

Hello there.
Take a look on my reply. Hope it help you!