如何用<img>显示科多瓦插件相机的图像

Question

我想使用cordova-plugin-camera在手机中显示文件作为标签。

    const getPicture = () => new Promise((resolve, reject) => {
        camera.getPicture(data => resolve(data), msg => reject(msg), {
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            mediaType: Camera.MediaType.ALLMEDIA,
            allowEdit: true,
        });
    });
    
    let url = await getPicture();
    // url is "/storage/emulated/0/DCIM/Camera/20220208_140605.jpg"

    const onsuccess = function (entry) {
        image.src = entry.toURL();
        // entry.toURL() is "https://localhost/__cdvfile_sdcard__/DCIM/Camera/20220208_140605.jpg"
    }
    const onerror = function (err) {
        console.error(`error : ${err.code}`);
    }
    if (!url.startsWith('file://')) {
        url = `file://${url}`;
    }
    window.resolveLocalFileSystemURL(url, onsuccess, onerror);

我试过了，但出错了。(在远程铬设备中)

Failed to load resource: net::ERR_CONNECTION_REFUSED

我的package.json如下：

{
  "name": "app.hybrid.foobar",
  "displayName": "foobar",
  "version": "0.0.1",
  "main": "index.js",
  "devDependencies": {
    "cordova-android": "^10.1.2",
    "cordova-plugin-android-permissions": "^1.1.4",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-file": "^7.0.0"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-camera": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      },
      "cordova-plugin-file": {
        "ANDROIDX_WEBKIT_VERSION": "1.4.0"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

当我搜索时，我看到一个数据URL并将它写在IMG标记中，但在我的例子中，我需要显示很多图像，而且图像大小很大。

有办法吗？

Answer 1

这是个许可问题。我在config.xml中添加了以下内容并解决了这个问题。这里的重点似乎是一个RequestLegacnyxternalStorage。

<platform name="android">
    <config-file target="AndroidManifest.xml" parent="/*">
<!-- added lines start -->
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- added lines end -->
      <uses-permission android:name="android.permission.CAMERA"/>
      <uses-permission android:name="android.webkit.PermissionRequest"/>
      <uses-feature android:name="android.hardware.camera"/>
      <uses-feature android:name="android.hardware.camera.autofocus"/>
      <uses-feature android:name="android.hardware.camera2.full"/>
      <uses-feature android:name="android.hardware.camera2.autofocus"/>
    </config-file>
<!-- added lines start -->
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
      <application android:requestLegacyExternalStorage="true"/>
    </edit-config>
<!-- added lines end -->
  </platform>