cordova Ionic 4从图库中选择多个图像,图像拾取器不工作

2wnc66cl  于 2023-10-24  发布在  Ionic
关注(0)|答案(3)|浏览(191)

我使用Image-Picker从图库中选择多个图像,但我得到了“Plugin_not_installed”
我使用从链接安装插件ionic image picker

ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker

在我的package.json中安装cordova插件和telerik图像拾取器后:

{
  "name": "sheedo",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/camera": "^5.14.0",
    "@ionic-native/core": "^5.14.0",
    "@ionic-native/file": "^5.14.0",
    "@ionic-native/image-picker": "^5.14.0",
    "@ionic-native/screen-orientation": "^5.14.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "cordova-android": "8.1.0",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-telerik-imagepicker": "^2.3.3",
    "core-js": "^2.5.4",
    "es6-promise-plugin": "^4.2.2",
    "ionic4-hidenav": "^0.1.2",
    "jalali-moment": "^3.3.3",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file": {},
      "cordova-plugin-telerik-imagepicker": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
      }
    },
    "platforms": [
      "ios"
    ]
  }
}

并使用图像拾取器

let options: ImagePickerOptions = {
      maximumImagesCount: 8
    };`enter code here`
if( !this.imagePicker.hasReadPermission) this.imagePicker.requestReadPermission();

    this.imagePicker.getPictures(options).then((results) => {
      for (var i = 0; i < results.length; i++) {
          console.log('Image URI: ' + results[i]);
      }
    }, (err) => {alert(err) });

运行时使用离子服务器devapp
当点击getImage时,我使用alert获取错误

"Plugin_not_installed"

在vsCode Console中

`[ng] [console.warn]: "Native: tried calling ImagePicker.getPictures, but the ImagePicker plugin is not installed."
[ng] [console.warn]: "Install the ImagePicker plugin: 'ionic cordova plugin add cordova-plugin-telerik-imagepicker'"`

网上所有的例子都做到了这一点
也是i test命令

npm install @ionic-native/image-picker@4

对于安装版本4,但应用程序没有构建。
我的ionic版本是4和我运行android平台

zvokhttg

zvokhttg1#

您可以使用

https://ionicframework.com/docs/native/image-picker

ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker

 * `cordova plugin add cordova-android-support-gradle-release`
 * `ioinc cordova platform rm android`
 * `ionic cordova platform add android`
 * `ionic cordova build android --prod`

import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker/ngx';

constructor(private imagePicker: ImagePicker) { }



getPictures() {
    let options: ImagePickerOptions = {  
          //here Quality of images, defaults to 100  
          quality: 100,  
          //here Width of an Image  
          width: 600,  
          //here Height of an Image  
          height: 600,  
          /** Output type, defaults to 0 (FILE_URI). 
    
          * FILE_URI :0 (number) it returns a actual path for an image 
    
          */  
          
          outputType: 1  
          //here Maximum image count for selection, defaults to 15.  
          //while setting a number 15 we can load 15 images in one selection.
    
          maximumImagesCount: 8
          // max images to be selected, defaults to 15. If this is set to 1  
        }; 
    
     this.imagePicker.getPictures(options)
          .then(selectedImg => { })
    }
6rqinv9w

6rqinv9w2#

尝试以非原生方式使用插件。在组件中声明一个窗口变量,然后使用它来调用插件。您需要从设备上测试它,它不能在浏览器上工作,也不能在--devapp serve上工作。它会工作得很好,但它不接受选项对象......我需要它返回base64(outputType:1),但总是返回fileURI

/*Imports section*/

declare const window: any;

@Component({...})

export class HomePage implements OnInit {

 constructor(){}

 yourMethod() {
  window.imagePicker.getPictures(
    async function(results) {
      for (var i = 0; i < results.length; i++) {
        const currentPicture = results[i];
        files.push(currentPicture);
      }
      console.log(files);
    }, function (error) {
      console.log('Error: ' + error);
    },
    {
      outputType: 1,
      maximumImagesCount: 30,
      quality: 100
    }
  );
 }
}
vuktfyat

vuktfyat3#

你尝试使用,这对我很有效
https://github.com/capawesome-team/capacitor-file-picker

const pickFiles = async () => { 
  const result = await FilePicker.pickFiles({
    types: ['image/png'],
    multiple: true,
  });
};

相关问题