如何< img>从cordova-plugin-camera显示图像

f0ofjuux  于 2022-11-15  发布在  其他
关注(0)|答案(1)|浏览(142)

我想使用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);

我尝试了它,但得到一个错误。(在远程铬devtools)

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标签中,但在我的情况下,我必须显示大量的图像,图像大小很大。
有没有办法?

iyfamqjs

iyfamqjs1#

这是一个权限问题。我在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>

相关问题