Ioni c Плагин Capacitor Cordova не может записать изображение в библиотеку на Android - PullRequest
Новая
       146

Ioni c Плагин Capacitor Cordova не может записать изображение в библиотеку на Android

0 голосов
/ 04 августа 2020

Я пытаюсь использовать cordova-plugin-document-scanner с Ioni c Capacitor для Android, но после захвата изображения и при отображении пользовательского интерфейса кадрирования изображения он просто возвращается снова на экран захвата. Это проблема в репозитории github . Вот что кажется актуальным в консоли 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.

Это моя конфигурация:

  • Устройство: Samsung Galaxy S10e
  • ОС: Android 10
  • @ конденсатор / сердечник: 2.3.0
  • @ конденсатор / android : 2.3.0
  • cordova-plugin-document-scanner: 4.2.5

Возможно ли, что Cordova и Capacitor имеют разные пути к файлам на устройстве? Где я мог это исправить? Любая помощь очень приветствуется :)

1 Ответ

1 голос
/ 04 августа 2020

Я реализовал это в своем проекте, используя Ioni c 5 и Capacitor. Это длинный код. Попробуйте это и, возможно, вам поможет.

Установите этот 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

Затем добавьте ниже код в соответствии с вашим случаем. Я добавил сюда свой полный код, потому что он включает все.

Есть два метода.

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

Вы можете получить доступ к такой служебной переменной из любого компонента.

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