How to convert image to string data in ionic 3

Question

Currently I am developing Ionic3 project. Now I tried to store image data from UI to sqlite. But I am not sure about the appropriate way to do it. If you have already done, Please help me How can I to do it?

Answer 1

First of all you need to learn how to take a picture, and for that you should refer this link. https://devdactic.com/ionic-2-images/

after that the image is come in the path of image is like this file:///image_path, So you have to pass this path to the base64 plugin like this.

for that you have to install the plugin.

$ ionic cordova plugin add com-badrit-base64 $ npm install --save @ionic-native/base64

    public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
    title: 'Select Image Source',
    buttons: [
    {
      text: 'Load from Library',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
    }
    },
    {
      text: 'Use Camera',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.CAMERA);
      }
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
    ] 
    });
    actionSheet.present();
}

public takePicture(sourceType) {

    let resUser: string = "res.users";

    // Create options for the Camera Dialog
    var options = {
        quality: 100,
        sourceType: sourceType,
        saveToPhotoAlbum: true,
        correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library

    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {

    this.base64.encodeFile(imagePath).then((base64String: string) => {
      // console.log("-----base64String-----" + base64String);
      let imageSrc = base64String.split(",");
      console.log("---Splitted image string----" + imageSrc[1]);
      this.src = imageSrc[1]


      let args = {
        image: imageSrc[1]
      }

      this.odooRpc.updateRecord(resUser, this.data[0].id, args).then((res: any) => {
        console.log("----res of updation---" + res);
      }).catch((err: any) => {
        this.presentToast("There is some problem in uploading image")
      })

    })

    this.filePath.resolveNativePath(imagePath)
      .then(filePath => {
        let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
        let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      });

    } else {

    this.base64.encodeFile(imagePath).then((base64String: string) => {
      // console.log("-----base64String-----" + base64String);
      let imageSrc = base64String.split(",");
      console.log("---Splitted image string----" + imageSrc[1]);
      this.src = imageSrc[1]

      let args = {
        image: imageSrc[1]
      }

      this.odooRpc.updateRecord(resUser, this.data[0].id, args).then((res: any) => {
        console.log("----res of updation---" + res);
      }).catch((err: any) => {
        this.presentToast("There is some problem in uploading image")
      })
    })

    console.log("-------inside else IMage Path------" + imagePath);

    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
    this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
    }, (err) => {
      this.presentToast('Error while selecting image.');
    });
    }

private createFileName() {
    var d = new Date(),
    n = d.getTime(),
    newFileName = n + ".jpg";
    return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
    }, error => {
    this.presentToast('Error while storing file.');
    });
}