Some image questions (filesystem, path, filename, image resizing)

Ionic Native
1

Hi,
I’m building an app where a photo can be taken to be used as an avatar of an airplane. I’m using a few native plugins right now to get where I want. My goal is an image that is not the full size that the camera gives me (not neccesary and saving storagespace), and the final file must be in the dataDirectory in an custom made folder there. So it will not be indexed for the gallery (I hope to establish that by putting it in the dataDirectory where no other app can come).
Below are two questions that I have now about this proces.

So… What I have now is this (full code below):

  • using file.checkDir: Does the folder “planes” exists in dataDirectory? Yes, nice! No, create it using file.createDir
  • using camera.getPicture: Take a picture as DestinationType.FILE_URI
    Q) On my Android device I notice that the file is delivered here: file.externalCacheDirectory
    But since iOS does not have externalCacheDirectory (http://ngcordova.com/docs/plugins/file/), where will I have to look for the file?
    How do I know I’m using iOS or Android folders.
    Or can I directly instruct getPicture to store the file in file.dataDirectory+“planes”
  • using file.movefile I move the file to the just created folder “planes”
  • using imageResizer I resize the image to an acceptable size. I really like this plugin because it uses the given destination height,width and ‘contains the image’ in there. So portrait or landscape doesn’t matter. The plugin does the thiinking :wink: I do not want the height,width used by getPicture because that distorts the photo is taken wrong portrait or landscape.
    Q) The source file is now allready in the file.dataDirectory+“planes” . Unfortunately imageResizer outputs the file to the root folder. I cannot figure out how to instruct the plugin to keep the originating folder. Different name, that’s fine but not another folder… There is this folderName option but that is Android only. Again the problem that I want this to work on iOS too.
    So, do I have to move the resized image again? and delte the big sourceimage? Or is there an easier way to achive this.

Thanks in advance!

Remco

My code so far:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';

import { ImageResizer, ImageResizerOptions } from '@ionic-native/image-resizer';
import { File } from '@ionic-native/file';
import { Camera, CameraOptions } from '@ionic-native/camera';

@IonicPage()

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(
    private camera: Camera,
    private file: File,
    private imageResizer: ImageResizer,
    public navCtrl: NavController) {
  }

  //does the file.dataDirectory+"planes" dir exist? if not create it..
  //returning true or err
  checkdirplanes() {
    return new Promise(resolve => {
      this.file.checkDir(this.file.dataDirectory, "planes")
      .then(() => resolve(true))
      .catch(err => this.file.createDir(this.file.dataDirectory, "planes", false))
        .then(() => resolve(this.file.dataDirectory+"planes (gemaakt)"))
        .catch(err => resolve(err))
    })
  }

  //take photo 
  //returning data that contains the file location, or err
  takephotofile() {
    return new Promise(resolve =>
    {
      this.camera.getPicture({
        quality: 75, 
        destinationType: this.camera.DestinationType.FILE_URI,  
        sourceType: this.camera.PictureSourceType.CAMERA, 
        encodingType: this.camera.EncodingType.JPEG,
        saveToPhotoAlbum: false,
        correctOrientation: true        
      })
      .then((photodata) => resolve(photodata))
      .catch((err) => resolve(err))
    });
  }  

  //move the photo by the given parameters
  //returning the new entry information, or err
  movephotofile(folderfrom, namefrom, folderto, nameto) {
    return new Promise(resolve =>
    {      
      this.file.moveFile(folderfrom, namefrom, folderto, nameto)
      .then(movedentry => resolve(movedentry))
      .catch(err => resolve(err))  
    })
  }  

  //resize the photo that is given by the parameters
  //returning resized filepath, or err
  resizeimage(folder, name) {
    return new Promise(resolve =>
    {
      this.imageResizer.resize({
        uri: folder+name,
        quality: 85,
        width: 1200, //maximum width
        height: 675, //maximum height     
      })
      .then((filePath) => resolve(filePath))
      .catch(err => resolve(err))
    })
  }    

  letsmakeanavatar() {
    this.checkdirplanes()
    .then(() => this.takephotofile())
    .then((photodata) => {
      let currentName = photodata.toString().replace(/^.*[\\\/]/, '');
      this.movephotofile(this.file.externalCacheDirectory, currentName, this.file.dataDirectory+"planes/", currentName)
      .then((movedentry) => this.resizeimage(this.file.dataDirectory+"planes/", currentName))
    });
  }

}