How to get base64 file size while choosing image from mobile device in ionic with #ionic-native/camera - ionic-framework

Question

// in Component
pickImage(sourceType) {
const options: CameraOptions = {
quality: 100,
sourceType: sourceType,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation:true
}
this.camera.getPicture(options).then((imageData) => {
console.log("imageData", imageData);
this.base64Image = 'data:image/jpeg;base64,' + imageData;
// I want to get file size here
// because i want to validate image of size 2MB or less
}, async (err) => {
console.log("err", err);
const toast = await this.toastController.create({
message: 'Error Occurs',
duration: 3000,
position: 'bottom',
color: "danger",
animated: true,
});
toast.present();
});
}
my package.json
{
"name": "ionic-conference-app",
"version": "0.0.0",
"description": "Ionic Conference App",
"author": "Ionic Team <hi#ionicframework.com>",
"license": "Apache-2.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "webdriver-manager update --standalone false --gecko false"
},
"repository": {
"type": "git",
"url": "https://github.com/ionic-team/ionic-conference-app.git"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "^8.2.14",
"#angular/core": "^8.2.14",
"#angular/forms": "^8.2.14",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "^8.2.14",
"#angular/platform-browser-dynamic": "^8.2.14",
"#angular/pwa": "^0.803.23",
"#angular/router": "^8.2.14",
"#angular/service-worker": "^8.2.14",
"#capacitor/android": "^1.5.1",
"#capacitor/core": "1.5.1",
"#ionic-native/camera": "^5.24.0",
"#ionic-native/core": "5.0.0-beta.15",
"#ionic-native/file": "^5.24.0",
"#ionic-native/google-plus": "^5.23.0",
"#ionic-native/in-app-browser": "5.0.0-beta.15",
"#ionic-native/native-storage": "^5.23.0",
"#ionic-native/social-sharing": "^5.24.0",
"#ionic-native/splash-screen": "5.0.0-beta.15",
"#ionic-native/status-bar": "5.0.0-beta.15",
"#ionic/angular": "^5.0.4",
"#ionic/storage": "^2.1.3",
"angularfire2": "^5.4.2",
"chart.js": "^2.9.3",
"cordova-android": "^7.0.0",
"cordova-browser": "^6.0.0",
"cordova-ios": "^5.1.1",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-inappbrowser": "^3.2.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.6.5",
"core-js": "^3.6.4",
"es6-promise-plugin": "^4.2.2",
"firebase": "^7.13.2",
"hammerjs": "^2.0.8",
"ng-payment-card": "0.0.8",
"rxjs": "^6.5.4",
"sw-toolbox": "3.6.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "^0.803.23",
"#angular-devkit/build-angular": "^0.803.23",
"#angular-devkit/core": "^8.3.23",
"#angular-devkit/schematics": "^8.3.23",
"#angular/cli": "^8.3.23",
"#angular/compiler": "^8.2.14",
"#angular/compiler-cli": "^8.2.14",
"#angular/language-service": "^8.2.14",
"#capacitor/cli": "1.5.1",
"#ionic/angular-toolkit": "^2.1.2",
"#ionic/lab": "^2.0.19",
"#types/jasmine": "3.4.6",
"#types/jasminewd2": "2.0.8",
"#types/node": "^12.12.26",
"codelyzer": "^5.2.1",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.2",
"protractor": "^5.4.3",
"puppeteer": "^1.20.0",
"ts-node": "8.5.0",
"tslint": "^5.20.1",
"typescript": "~3.5.3"
},
"cordova": {
"platforms": [
"ios",
"browser",
"android"
],
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+",
"PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file": {}
}
}
}

Answer 1

Your application seems to be built on capacitor, so you can use the capacitor inbuilt camera plugin.
https://capacitor.ionicframework.com/docs/apis/camera/
You can specify under CameraOptions - resultType:CameraResultType.Base64, how data is returned.