离子电容器 cordova 插件无法将图像写入 Android 上的库

Question

我正在尝试将cordova-plugin-document-scanner与 Ionic Capacitor 一起用于 Android，但在捕获图像后以及应显示图像裁剪 UI 时，它会再次返回到捕获屏幕。 这是github repo 上的问题。 这在 logcat 控制台中似乎是相关的：

2020-08-03 13:26:05.320 27707-27707/si.test.app D/ViewRootImpl@9f2e8cd[ScanActivity]: Relayout returned: old=(0,0,1080,2280) new=(0,0,1080,2280) req=(1080,2280)4 dur=8 res=0x1 s={false 0} ch=false 2020-08-03 13:26:05.321 27707-27707/si.test.app D/ViewRootImpl@9f2e8cd[ScanActivity]: stopped(false) old=true 2020-08-03 13:26:05.328 27707-27707/si.test.app W/System.err: java.io.FileNotFoundException: open failed: ENOENT (No such file or directory)

2020-08-03 13:42:50.749 1278-1278/? E/Util: writeImageDataToRequestedUri: failed to make directory or the directory already existed.

2020-08-03 13:42:50.760 1278-1278/? E/Util: writeImageDataToRequestedUri: Returned because outputStream IOException.

这是我的配置：

• 设备：三星 Galaxy S10e
• 操作系统：Android 10
• @电容器/核心：2.3.0
• @电容器/机器人：2.3.0
• cordova-plugin-document-scanner：4.2.5

Cordova 和 Capacitor 是否有可能在设备上有不同的文件路径？ 我在哪里可以解决这个问题？ 非常感谢任何帮助:)

Answer 1

我在我的项目中使用 Ionic 5 和 Capacitor 实现了这一点。 是长码。 试试这个，也许对你有帮助。

安装这个 npm

 npm install cordova-plugin-crop npm install @ionic-native/crop npm install cordova-plugin-ionic-webview npm install @ionic-native/ionic-webview

然后创建服务文件。 例如：照片服务

然后根据您的情况添加以下代码。 我在这里添加了我的完整代码，因为它包含了所有的东西。

有两种方法。

getImageCam() - 从相机获取图像 > 来源：CameraSource.Camera

getImageGall() - 从画廊获取图像 > 来源：CameraSource.Photos

import { Injectable } from "@angular/core";
import {
  Plugins,
  CameraResultType,
  CameraPhoto,
  CameraSource,
} from "@capacitor/core";
import { Crop } from "@ionic-native/crop/ngx";
import { WebView } from "@ionic-native/ionic-webview/ngx";
//import { File } from "@ionic-native/file/ngx";

const { Camera, Filesystem, Storage } = Plugins;

@Injectable({
  providedIn: "root",
})
export class PhotoService {
  newCapturedImg: any = null;
  ImgNameStart: any = "yourName";
  formDataImage: any;
  cropImage: CameraPhoto;

  constructor(private crop: Crop, private webview: WebView) {}

  public async getImageCam() {
    // Take a photo
    const capturedPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100,
      // allowEditing: true,
      // height: 300,
      // width: 300
    });

    console.log(capturedPhoto);

    this.crop
      .crop(capturedPhoto.path, {
        quality: 100,
      })
      .then(
        (newImage) => {
          this.newCapturedImg = this.webview.convertFileSrc(newImage);

          //console.log("new image path is: " + newImage);
          //console.log("new image webpath is: " + this.newCapturedImg);

          this.cropImage = {
            path: newImage,
            webPath: this.newCapturedImg,
            format: "jpeg",
          };

          const savedImageFile =  this.savePicture(this.cropImage);
        },
        (error) => console.error("Error cropping image", error)
      );
  }

  public async getImageGall() {
    // Take a photo
    const capturedPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Photos,
      quality: 100,
      // allowEditing: true,
      // height: 300,
      // width: 300,
    });

    this.crop
      .crop(capturedPhoto.path, {
        quality: 100,
      })
      .then(
        (newImage) => {
          this.newCapturedImg = this.webview.convertFileSrc(newImage);

          //console.log("new image path is: " + newImage);
          //console.log(this.newCapturedImg);

          this.cropImage = {
            path: newImage,
            webPath: this.newCapturedImg,
            format: "jpeg",
          };

          const savedImageFile = this.savePicture(this.cropImage);
        },
        (error) => console.error("Error cropping image", error)
      );

  }    


  private async savePicture(cameraPhoto: CameraPhoto) {
    const blobData = await this.readABlob(cameraPhoto);
    this.formDataImage = blobData;
  }

  private async readABlob(cameraPhoto: CameraPhoto) {
    const response = await fetch(cameraPhoto.webPath!);
    const blob = await response.blob();
    console.log("blob --> ", blob);
    return blob;
  }


  createFileName() {
    let d = new Date();
    let n = d.getTime();
    let newFileName = `${this.ImgNameStart + n}.jpg`;
    return newFileName;
  }
}

interface Photo {
  filepath: string;
  webviewPath: string;
  base64?: string;
}

您可以从任何组件访问这样的服务变量。

例子.page.ts

import { PhotoService } from "../../services/photo.service";

...

  constructor(public photoService: PhotoService) {}

...

yourMethod() {
  this.photoService.getImageCam() // or getImageGall()


  let formDataImage = this.photoService.formDataImage;
  let imageName = this.photoService.createFileName();
  let urlToImageSrc = this.photoService.newCapturedImg;
}