Convertir una imagen PNG/JPG a base64 en Ionic 4

Las imágenes se trabajan en base64 para poderlas enviar a traves de un objeto JSON a las API's o micro servicios, por eso es importante que nuestra app internamente convierta un jpg,png desde los assets a una base64. En este episodio hablaremos de como seleccionar una imagen desde la galeria y convertirla en un string valido en base64.

Primero crear el proyecto mediante el comando:

ionic start imagenBase64 blank

Entramos al directorio de la aplicación y vamos a instalar las dependencias que vamos a ir necesitando para este proyecto, las voy a ir listando a continuación cada una:

• ionic cordova plugin add cordova-plugin-camera
• npm install @ionic-native/camera
• ionic cordova plugin add cordova-plugin-file
• npm install @ionic-native/file
• ionic cordova plugin add cordova-plugin-crop
• npm install @ionic-native/crop

Una vez instaladas todas estas dependencias ahora si vamos abrir el proyecto en nuestro editor de código favoritos, el mio es Visual Studio Code.

Abrimos el app.module.ts y añadimos las siguientes líneas:

• import { Camera } from '@ionic-native/Camera/ngx';
• import { File } from '@ionic-native/file/ngx';
• import { Crop } from '@ionic-native/crop/ngx';

En los Providers debería quedarnos así:

providers: [

    StatusBar,

    SplashScreen,

    Camera,

    File,

    Crop,

    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

  ],

Posteriormente en la home.page.ts también tenemos que importar las referencias para poderlas usar, y al mismo tiempo instanciarlas en el contructor, quedándonos un archivo de la siguiente forma:

import { Camera,CameraOptions } from '@ionic-native/Camera/ngx';

import { File } from '@ionic-native/file/ngx';

import { ActionSheetController } from '@ionic/angular';

import { Crop } from '@ionic-native/crop/ngx';

Las variables que vamos ir iniciando serían estas:

croppedImagepath = "";

  isLoading = false;

  imagePickerOptions = {

    maximumImagesCount: 1,

    quality: 50

  };

La instancias del constructor, quedaría así:

constructor(private camara:Camera, 

    public actionSheetController: ActionSheetController, 

    private archivo: File,

    private crop:Crop) {}

y vamos creando estas tres funciones adicionales:

pickImage(sourceType) {

    const options: CameraOptions = {

      quality: 100,

      sourceType: sourceType,

      destinationType: this.camara.DestinationType.FILE_URI,

      encodingType: this.camara.EncodingType.JPEG,

      mediaType: this.camara.MediaType.PICTURE

    }

    this.camara.getPicture(options).then((imageData) => {

      this.cropImage(imageData)

    }, (err) => {

      

    });

  }

    async selectImage() {

      const actionSheet = await this.actionSheetController.create({

        header: "Seleccione la imagen",

        buttons: [{

          text: 'Cargar de la libreria',

          handler: () => {

            this.pickImage(this.camara.PictureSourceType.PHOTOLIBRARY);

          }

        },

        {

          text: 'Usar la Cámara',

          handler: () => {

            this.pickImage(this.camara.PictureSourceType.CAMERA);

          }

        },

        {

          text: 'Cancel',

          role: 'cancel'

        }

        ]

      });

      await actionSheet.present();

    }

    cropImage(fileUrl) {

      this.crop.crop(fileUrl, { quality: 50 })

        .then(

          newPath => {

            this.showCroppedImage(newPath.split('?')[0])

          },

          error => {

            alert('Error al cortar la imagen' + error);

          }

        );

    }

    showCroppedImage(ImagePath) {

      this.isLoading = true;

      var copyPath = ImagePath;

      var splitPath = copyPath.split('/');

      var imageName = splitPath[splitPath.length - 1];

      var filePath = ImagePath.split(imageName)[0];

  

      this.archivo.readAsDataURL(filePath, imageName).then(base64 => {

        this.croppedImagepath = base64;

        this.isLoading = false;

      }, error => {

        alert('Error al mostrar la imagen' + error);

        this.isLoading = false;

      });

    }

Finalmente el home.page.html quedaría de esta forma:

<ion-header>

  <ion-toolbar color="primary">

    <ion-title>

      Upload Imagenes y Convertir Base 64

    </ion-title>

  </ion-toolbar>

</ion-header>

<ion-content>

  <ion-button color="primary" (click)="selectImage()">Cargar</ion-button>

  <h5 *ngIf="croppedImagepath.length">Recortar la foto</h5>

  <p *ngIf="isLoading">Cargando ...</p>

  <img [src]="croppedImagepath" />

</ion-content>

Para probar el proyecto normalmente ejecutaríamos el comando ionic serve, pero en este caso como se están usando unas librerías que son exclusivas de cordova tenemos que emular ese cordova que se ejecute en el browser, esto lo haremos de la siguiente forma:

ionic cordova platform add browser

Después de eso deberíamos ejecutar el siguiente comando, que lo que hace es inyectar nuestro archivo cordova.js dentro de la ejecución.

 ionic serve browser

La aplicación debería quedar así como la imagen que se ve a continuación:

Dando clic en el botón, nos saldría las opciones en la parte inferior esto se logra gracias a: ActionSheetController.

Si todavía te muestra un error en la consola de chrome, podrias ejecutar el siguiente comando:

ionic cordova run browser

Para activar las herramientas de desarrrollador de Chrome, debes presionar CTRL+SHIFT+I o ir a los tres puntitos a la derecha del navegador, ir a la opción Más Herramientas y activar Herramientas de Desarrollador.

Saludos.