如何在使用@ ionic-native / camera的ionic中从移动设备中选择图像时如何获取base64文件大小

问题描述 投票:0回答:1
// 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 <[email protected]>",
      "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": {}
        }
      }
    }
ionic-framework camera base64 ionic-native
1个回答
0
投票

您的应用程序似乎是基于电容器构建的,因此可以使用电容器内置的相机插件。

https://capacitor.ionicframework.com/docs/apis/camera/

您可以在CameraOptions-resultType:CameraResultType.Base64下指定如何返回数据。

© www.soinside.com 2019 - 2024. All rights reserved.