Ionic Capacitor Cordova插件无法在Android上将图像写入库

问题描述

我正在尝试将与适用于Android的离子电容器，但是在捕获图像并应显示图像裁剪UI后，它会再次返回到捕获屏幕。这是github存储库上的。在logcat控制台中这似乎是相关的：

I am trying to use cordova-plugin-document-scanner with Ionic Capacitor for Android, but after the image is captured and when image crop UI should be displayed, it just returns to the capture screen again. This is the issue on the github repo. This is what seems relevant in the logcat console:

2020-08-03 13：26：05.320 27707-27707 / si.test.app D / ViewRootImpl @ 9f2e8cd [ScanActivity]：中继返回：旧=（0,0,1080,2280）新=（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]：已停止（false）old = true 2020-08-03 13：26：05.328 27707- 27707 / si.test.app W / System.err：java.io.FileNotFoundException：打开失败：ENOENT（没有这样的文件或目录）

2020-08-03 13：42：50.749 1278-1278 /？ E / Util：writeImageDataToRequestedUri：无法建立目录或目录已存在。

2020-08-03 13：42：50.760 1278-1278 /？ E / Util：writeImageDataToRequestedUri：由于outputStream IOException而返回。

这是我的配置：

• 设备：Samsung Galaxy S10e


• 操作系统：Android 10


• @ capacitor / core：2.3.0


• @ capacitor / android：2.3.0


• cordova-plugin-document-scanner：4.2.5

• Device: Samsung Galaxy S10e
• OS: Android 10
• @capacitor/core : 2.3.0
• @capacitor/android: 2.3.0
• cordova-plugin-document-scanner: 4.2.5

Cordova和Capacitor是否有可能在设备上具有不同的文件路径？我在哪里可以解决？任何帮助都非常有用：）

Is it possible, that Cordova and Capacitor have different paths to files on the device? Where could I fix that? Any help greatly appriciated :)

推荐答案

我在我的项目中使用Ionic 5和Capacitor实现了此功能。这是长代码。尝试此操作，也许可以为您提供帮助。

I implemented this in my project using Ionic 5 and Capacitor. It is long code. Try this and maybe help you.

安装此npms

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

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

然后创建服务文件。
例如：photo.service

Then create service file.ex: photo.service

然后根据您的情况添加以下代码。我将完整的代码添加到此处，因为它包含所有内容。

Then add below code according to your case. I added my full code to here because it include all things.

有两种方法。

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

getImageCam() - get image from camera > source: CameraSource.Camera

getImageGall（）-从图库>中获取图像来源：CameraSource.Photos

getImageGall() - get image from gallery > source: 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;
}

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

You can access service variable like this from any component.

example.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;
}

这篇关于Ionic Capacitor Cordova插件无法在Android上将图像写入库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！