从cordova html页面（cordova）加载保存在iOS App Documents目录中的图像？

Posted 2023-03-07

【中文标题】从cordova html页面（cordova）加载保存在iOS App Documents目录中的图像？

【英文标题】：Load images saved in iOS App Documents directory from cordova html page (cordova)?

【发布时间】：2014-11-07 16:45:21

【问题描述】：

我已经构建了 1 个必须在 ios、android 和 Windows Phone 上运行的应用程序。除了iOS，一切都很好。我的应用使用相机拍照，调整图像大小并保存图像。

在 iOS 上，这些图像被保存到应用程序的 tmp 目录中，该目录正在被删除，所以现在我将图像保存到 Documents 文件夹中。

然后我将此图像的路径保存到我的 sqlite 数据库中。在我的 html 页面上，我使用 url 引用文件，例如

var/mobile/application/GUID-HERE/Documents/imageName.jpg

现在看来，当我在 xCode 中重建我的应用程序时，应用程序 guid 已更改，因此我之前保存的所有文件引用现在都无效了。

所以

我可以从我的 HTML 页面中相对引用文档文件夹吗？

或

我可以停止我的应用程序更改此 GUID 吗？

【问题讨论】：

我认为应用程序 GUID 不必更改。如果我没记错的话，它发生在我的设备上，因为安装了另一个版本的应用程序。删除后，GUID 停止更改。我不知道您是否可以通过将源设置为 CDVFile://localhost/ 路径来加载图像，但如果可以，那么您可以从 FileSystem 获取本地路径并保存。

It looks like you can.

【参考方案1】：

使用文件插件的toInternalURL() 属性。保存图像后，您可以获得没有该 GUID 的本地 url，并将其保存到数据库中。网址有这种格式

cdvfile://localhost/persistent/path/to/file

Documentation

一个例子： （主要来自file-transfer docs。需要文件和文件传输插件）

resolveLocalFileSystemURL(cordova.file.documentsDirectory, function success(entry) 
    download(entry.toInternalURL() + "image.jpg");
);

var download = function(localUrl) 

    var fileTransfer = new FileTransfer();
    var uri = encodeURI("https://cordova.apache.org/images/cordova_bot.png");

    fileTransfer.download(
      uri,
      localUrl,
      function(entry) 
          document.body.innerHTML = entry.toInternalURL();
          var img = document.createElement("img");
          img.setAttribute('src', entry.toInternalURL());
          document.body.appendChild(img);

      ,
      function(error) 
          console.log("error code" + error.code);
      ,
      false,
      
          headers: 
              "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
          
      
  );

【讨论】：

如果您想将 cdvfile:// url 用作播放媒体的音频或视频标签的 src，它似乎不起作用。似乎只适用于图像。

@kindasimple 我只是存储我的图像 fileSystem.root.getDirectory/SmartMEdia/Jellyfish.jpg.. 你能告诉我如何访问这个文件吗？

@DustinDempsey 如果使用 Angular，您可能需要这样做： var app = angular.module( 'myApp', [] ) .config( [ '$compileProvider', function( $compileProvider ) $ compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile):|data:image\//); ]);礼貌：forum.ionicframework.com/t/…