在 Android 手机上运行时，与 Capacitor Camera 插件和 EXIFR 插件不获取位置数据的反应

编程问答 2022-04-21

问题描述

我使用以下教程使用 Capacitor Camera 插件启动并运行 React 应用程序。我已将其设置为提示询问用户是要拍照还是选择已拍摄的照片。

https://ionicframework.com/docs/react/your-first-app

然后，我导入并使用 EXIFR (https://www.npmjs.com/package/exifr) 使用使用相机插件时选择的照片或文件中的 base64 数据提取 EXIF 数据。

当我通过 VS Code 作为 PWA 运行代码时，我不会在使用笔记本电脑网络摄像头拍照时获取位置数据。如果我将照片从我的手机传输到我的笔记本电脑，我知道我知道有位置数据，我可以使用相机插件选择它，EXIFR 成功获取位置数据。

我的 React 项目设置也能够生成一个 Android 项目。当我在 Android Studio 中打开它并在连接手机的情况下运行它时，如果我拍照，尝试提取位置数据时会出错。如果我从我的图库中选择一张照片，它会告诉我位置数据的纬度和经度都为零。 PWA 和 Android 都会用正确的品牌和型号数据提醒我，所以我知道 EXIFR 能够读取 EXIF 数据，但我想知道这是否是我尚未弄清楚的 Android 中的权限问题。

以下是我在 AndroidManifest.xml 中设置的权限：

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>

这是我拍摄和保存照片的代码：

    const takePhoto = async () => {
      const cameraPhoto = await Camera.getPhoto({
        resultType: CameraResultType.Uri,source: CameraSource.Prompt,quality: 100,});
      
      const fileName = new Date().getTime() + ".jpeg";
      const savedFileImage = await savePicture(cameraPhoto,fileName);
      const newPhotos = [
        savedFileImage,...photos
      ];
      setPhotos(newPhotos);
      Storage.set({ key: PHOTO_STORAGE,value: JSON.stringify(newPhotos) });
    };

  const savePicture = async (photo: Photo,fileName: string): Promise<Photo> => {
    let base64Data: string = '';
    if (isPlatform('hybrid')) {
      if (typeof photo.path === 'string') {
        const file = await Filesystem.readFile({
          path: photo.path
        });
        base64Data = file.data;
      }
    } else {
      base64Data = await base64FromPath(photo.webPath);
    }
    const savedFile = await Filesystem.writeFile({
      path: fileName,data: base64Data,directory: Directory.Data,});

      alert(base64Data);
      try {
        debugger;
        const exifData = await exifr.parse(base64Data,['Make','Model']);
        alert(exifData["Make"] + ' ' + exifData["Model"]);
        let {latitude,longitude} = await exifr.gps(base64Data);
        alert(latitude + '/' + longitude);
        photo.exif = latitude + "/" + longitude;
      }
      catch (err) {
        console.log(err);
      }

    if (isPlatform('hybrid')) {
      return {
        path: savedFile.uri,webPath: Capacitor.convertFileSrc(savedFile.uri),format: "jpeg",};
    } else {
      return {
        path: fileName,webPath: photo.webPath,exif: photo.exif,}
    }
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

androidandroidcapacitor-pluginexifexifreactjsreactjsreactjsreactjs