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


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(){
     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) => {

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('',formPayload.toString(),{headers: headers})
    .map((response: Response) => {
      let results = response.json();
      if (results.mensaje) {
        return results.mensaje;
      } else{
        return null;

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


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,



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


Hello there. Try the code bellow:

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

    this.imagePicker.getPictures(options).then((results) => {
        this.convertToDataURLviaCanvas(results[0], "image/jpeg").then(data => {
            let img = <String>data;
            this.imgProvider.save(img).subscribe(data => {
            }, 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'),
            canvas.height = 1000;
            canvas.width = 1000;
            ctx.drawImage(img, 0, 0);
            dataURL = canvas.toDataURL();
            canvas = null;
        img.src = url;


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