相机，CameraOptions 在我的移动应用程序中不起作用

Question

我正在开发一个移动应用程序，我想打开图库以选择图片，但是当单击按钮时应用程序没有任何反应，甚至没有抛出错误，这是我的代码：

photos: any = '';
base64Image = '';

async agregarImg() {
    const actionSheet = await this.actionSheetController.create({
    header: 'Seleccionar medio',
    buttons: [{
      text: 'Cámara',
      icon: 'camera',
      handler: () => {
        this.takePicture(CameraSource.Camera, false)
      }
    }, {
      text: 'Galería',
      icon: !this.platform.is('ios') ? 'ios-images-outline' : 'images-outline',
      handler: () => {
        this.openGallery();
      }
    }]
    });
    await actionSheet.present();
  }

openGallery() {

    const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.DATA_URL,
      mediaType: this.camera.MediaType.PICTURE,
      encodingType: this.camera.EncodingType.JPEG,
      correctOrientation: true,
      allowEdit: false,
    }

    this.camera.getPicture(options).then((imageData) => {
      this.base64Image = 'data:image/jpeg;base64,' + imageData;
      this.photos.push(this.base64Image);
      this.photos.reverse();
    }, (err) => {
      console.log(err);
    })
}

我读到了这个问题，可能插件会发生这种情况，这在 Android 上不能完美运行。 我使用这个插件： import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

Answer 1

将我的旧代码更改为这个新代码：

async agregarImg() {
    const actionSheet = await this.actionSheetController.create({
    header: 'Seleccionar medio',
    buttons: [{
      text: 'Cámara',
      icon: 'camera',
      handler: () => {
        this.takePicture(CameraSource.Camera, false, 1)
      }
    }, {
      text: 'Galería',
      icon: !this.platform.is('ios') ? 'ios-images-outline' : 'images-outline',
      handler: () => {
        this.takePicture(CameraSource.Photos, false, 2)
      }
    }]
    });
    await actionSheet.present();
  }

async takePicture(source: CameraSource, editable: boolean, flag: number) {
    if(flag === 1) {
      this.imgPerfilCamera = await Plugins.Camera.getPhoto({
        quality: 50,
        resultType: CameraResultType.Uri,
        saveToGallery: false,
        allowEditing: editable,
        source,
      });
    } else {
      this.imgPerfilCamera = await Plugins.Camera.getPhoto({
        quality: 50,
        resultType: CameraResultType.Uri,
        saveToGallery: false,
        allowEditing: editable,
        source: CameraSource.Photos
      });
    }
  }

使用这个插件

import { CameraPhoto, CameraResultType, CameraSource, Plugins } from '@capacitor/core';

使用以下代码在我的项目根目录中添加一个名为“patch-camera.js”的新文件：

const fs = require("fs");
const f =
  "node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/Camera.java";

fs.readFile(f, "utf8", function(err, data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(
    "String filename = contentUri.getLastPathSegment()",
    'String filename = "file"'
  );

  fs.writeFile(f, result, "utf8", function(err) {
    if (err) return console.log(err);
  });
});

并在我的 package.json 中添加安装后脚本

"scripts": {
    "postinstall": "node patch-camera.js"

此代码有效。

Answer 2

取自the docs，我建议进行以下更改

openGallery() {
   const options: CameraOptions = {
     ...
     destinationType: this.camera.DestinationType. FILE_URI,
     pictureSourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
     ...