首页 文章

Ionic,ngCordova - 从cacheDirectory下载并显示图像

提问于
浏览
0

我正在尝试创建一个angular.factory,以便能够下载图像并将其显示到我的Ionic App .

问题是我无法从'file.nativeURL'等显示下载img .

我正在使用ngCordova $ cordovaFile,$ cordovaFileTransfer插件 .

这是我的工厂代码:

app.factory('ImgDownload', function ($q, $cordovaFile, $cordovaFileTransfer) {

      function download_img(url, filePath, options, AllowAllHost){
          var q = $q.defer();
          $cordovaFileTransfer.download(url, filePath, options, AllowAllHost)
            .then(function(res) {
              q.resolve(res)
            }, function (err) {
              q.reject(err);
          });
          return q.promise
      }
      return {
           CheckFileSystemThenDownloadImg: function(url, file, StorageDirectory, directory) {
               var filePath = StorageDirectory + directory + '/' + file;
               var q = $q.defer();
               $cordovaFile.checkDir(StorageDirectory, directory).then(function () {
                    $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
                       q.resolve(res)
                    }, function() {
                        var options = {create : true, exclusive: false};
                        download_img(url, filePath, options, true).then(function (res) {
                           q.resolve(res);
                        }, function (err) {
                            q.reject(err)
                        })
                    })
               }, function() {
                   var options = {create : true, exclusive: false};
                   $cordovaFile.createDir(StorageDirectory, directory, true).then(function () {
                       download_img(url, filePath, options,true).then(function (res) {
                           q.resolve(res)
                           console.log(res)
                       }, function (err) {
                           console.log(err)
                           q.reject()
                       })
                   })
               });
               return q.promise
           },
           getLocalImg: function(StorageDirectory, file, directory) {
               var q = $q.defer();
               $cordovaFile.checkDir(StorageDirectory, directory).then(function () {
                   $cordovaFile.checkFile(StorageDirectory + directory + '/', file).then(function (res) {
                       q.resolve(res)
                   }, function (err) {
                       q.reject(err)
                   })
               }, function (err) {
                   q.reject(err)
               });
               return q.promise
           }
      }
    });

我的控制器:

app.controller('MainCtrl', function($scope, $ionicPlatform, ImgDownload){

      $scope.img_remote = 'http://yourwatch.gr/wp-content/uploads/CMC808071.jpg'
      $ionicPlatform.ready(function() {
        var url = 'http://yourwatch.gr/wp-content/uploads/CMC808071.jpg';
        var file = 'CMC808071.jpg';
        var StorageDirectory = cordova.file.cacheDirectory;
        var directory = 'Images';
        ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
          .then(function(res){
            console.log("CheckFileSystem..:" + angular.toJson(res))
          }, function(err){
            console.log(angular.toJson(err))
          })
        ImgDownload.getLocalImg(StorageDirectory, file, directory)
          .then(function(res){
            console.log("getLocalImg:" + angular.toJson(res))
            $scope.local_img_src = res
          },
          function(err){
            console.log(angular.toJson(err))
          })
      });
    });

我的看法:

<img ng-src="{{ local_img_src.nativeURL }}" alt="" />

我的meta Content-Security-Policy:

<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile://* content://* file:///*; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; media-src *">

我无法弄清楚为什么{}没有显示 . 我正在开发Mac和IOS应用程序 .

1 回答

  • 0

    看起来你在 CheckFileSystemThenDownloadImg 完成之前正在调用 getLocalImg . 尝试将 getLocalImg 移动到 console.log("CheckFileSystem..:" + angular.toJson(res)) 旁边,如下所示:

    ImgDownload.CheckFileSystemThenDownloadImg(url, file, StorageDirectory, directory)
    .then(function(res){
      console.log("CheckFileSystem..:" + angular.toJson(res));
      ImgDownload.getLocalImg(StorageDirectory, file, directory)
        .then(function(res){
          console.log("getLocalImg:" + angular.toJson(res))
          $scope.local_img_src = res
        },
        function(err){
          console.log(angular.toJson(err))
        });
      }, function(err){
        console.log(angular.toJson(err))
    });
    

相关问题