Question

我有这个应用程序，我在其中拍摄图像，将其本地保存到filesytem然后“暂时”显示它，我正在尝试在SQL上保存图像的文件URL（sqlcipher），然后为每个图像分配id “永久”显示它们，最终将它们上传到服务器。到目前为止，我可以捕获图像并将其保存在应用程序的filesytem（缓存文件夹）中。我尝试了几种方法来实现sql部分，但仍然不知道如何将它连接到dom（html）并使其工作。

任何帮助将不胜感激。

控制器

 $cordovaCamera.getPicture(options).then(function(imagePath) {
    // Grab the file name of the photo in the temporary directory

    var currentName = imagePath.replace(/^.*[\\\/]/, '');
    alert(currentName);

    //Create a new name for the photo to avoid duplication

    var d = new Date(),
        n = d.getTime(),
        newFileName = n + ".jpg";

    // If you are trying to load image from the gallery on Android we need special treatment!

    if ($cordovaDevice.getPlatform() == 'Android' && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
        window.FilePath.resolveNativePath(imagePath, function(entry) {
            window.resolveLocalFileSystemURL(entry, success, fail);

            function fail(e) {
                console.error('Error: ', e);
            }

            function success(fileEntry) {
                var namePath = fileEntry.nativeURL.substr(0, fileEntry.nativeURL.lastIndexOf('/') + 1);
                // Only copy because of access rights
                $cordovaFile.copyFile(namePath, fileEntry.name, cordova.file.dataDirectory, newFileName).then(function(success) {
                    $scope.image = newFileName;
                }, function(error) {
                    $scope.showAlert('Error', error.exception);
                });
                alert(fileEntry.nativeURL);

            };
        });
    } else {
        var namePath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
        // Move the file to permanent storage
        $cordovaFile.moveFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(function(success) {
            $scope.image = newFileName;
        }, function(error) {
            $scope.showAlert('Error', error.exception);
        });
        alert(namePath);

    }
},
function(err) {
    // Not always an error, maybe cancel was pressed...
})
};

 // Returns the local path inside the app for an image
  $scope.pathForImage = function(image) {
  if (image === null) {
    return '';
   } else {
    return cordova.file.dataDirectory + image;

}
  };

SQL

     $cordovaSQLite.execute(_db, 'CREATE TABLE IF NOT EXISTS Image' +
      '(' +
      'g_id integer primary key, ' +
      'imageUrl TEXT,' +
      'timeStamp TEXT' +
      ')');

  function SaveImgInDB(jsonImgObj) {
      var imgObj = {};
      imgObj.g_id = DataCheck(jsonImgObj.g_id);
      imgObj.imageUrl = DataCheck(jsonImgObj.imageUrl);
      imgObj.timeStamp = DataCheck(jsonImgObj.timeStamp);

      InsertImgInDB(imgObj);
  }

  function InsertImgInDB(imgObj) {
      var query = 'INSERT INTO Image' +
          '(' +
          'g_id integer primary key, ' +
          'imageUrl TEXT,' +
          'timeStamp TEXT' +
          ')';
      $cordovaSQLite.execute(_db, query, [
          imgObj.g_id,
          imgObj.imageUrl,
          imgObj.timeStamp
      ]).then(function(res) {
              Logger.log("Img Insert / ID -> " + res.insertId);
          },
          function(err) {
              Logger.log('img Insert' + err.message);
          });
  }


  .factory('Images', function($cordovaSQLite) {

      var images = [];

      return {
          all: function() {


              $cordovaSQLite.execute(_db, "SELECT * FROM Image")
                  .then(function(res) {
                          for (var i = 0; i < res.rows.length; i++) {
                              images.push(res.rows.item(i));
                          }
                      },
                      function(err) {
                          console.log("Error");
                      })

              return image;
          },
          remove: function(ImageId) {
              $cordovaSQLite.execute(db, "DELETE FROM Images WHERE id=?", [ImageId])
                  .then(function(res) {
                          console.log("Deleted");
                      },
                      function(err) {
                          console.log("Error");
                      })

          }
      }
  })

HTML

<ion-scroll>
    <img ng-src="{{pathForImage(image)}}" style="width: 100%; height: 100%;" />
</ion-scroll>

Answer 1

要将图像数据传送到DOM，在控制器中调用Image.all（）方法来获取图像。因为，它是一个SQL调用，它必须包含在这样的承诺中：

all: function() {
    return $q(function(resolve, reject){
        $cordovaSQLite.execute(_db, "SELECT * FROM Image")
                  .then(function(res) {
                          for (var i = 0; i < res.rows.length; i++) {
                              images.push(res.rows.item(i));
                          }
                          return resolve(images);//sending back images once the sql loads the dataset
                      },
                      function(err) {
                          console.log("Error");
                          return reject(err);//throwing error when there is a db error
                      })

    })

}

在您的控制器中调用工厂并将结果绑定到范围变量：

Image.all()//Image.all will return promise since we have impleented using $q service
    .then(function(images){
         $scope.images = images;//attach the image data to scope variable which can be bound to the DOM.
    })
    .catch(function(error){
         alert("couldnt load images");
    })

在你的HTML中：编辑：

<ion-scroll>
    <img ng-repeat="image in images" ng-src="pathForImage(image)" style="width: 100%; height: 100%;" />//repeat img tag for all images and bind their urls to the img tag
</ion-scroll>

Cordova图像文件URL保存到SQL

1 个答案: