离子图像保存和检索和显示

时间:2016-07-18 11:00:16

标签: angularjs sqlite cordova plugins ionic-framework

我使用离子angularJS创建了应用程序,我打开相机并使用下面的片段捕获图像。

//打开相机

  

插件:cordova插件添加cordova-plugin-camera

$scope.takePhoto = function () {
var options = {
quality: 75,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};

$cordovaCamera.getPicture(options).then(function (imageData) {

$scope.urlImg = "data:image/jpeg;base64," + imageData;


}, function (err) {
//An error occured. Show a message to the user

alert('Camera not avilable');

});
}

现在我需要将图像保存到图库(相册)中,我需要将图像名称保存到SQLite Db中。

现在如何调用图像并使用我在SQLite Db中保存的名称将其显示在标记中。

2 个答案:

答案 0 :(得分:0)

使用以下代码段完成活动并建议我,如果有任何错误。

  

拍照

$scope.takePhoto = function () {

//2
var options = {
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA, // Camera.PictureSourceType.PHOTOLIBRARY
allowEdit : false,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
};

//3
$cordovaCamera.getPicture(options).then(function(imageData) {

//4
onImageSuccess(imageData);

function onImageSuccess(fileURI) {
createFileEntry(fileURI);
}

function createFileEntry(fileURI) {
window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
}

//5
function copyFile(fileEntry) {
var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
alert(name);
alert(fileEntry.fullPath);
var newName = makeid() + name;
alert(newName);

window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
fileEntry.copyTo(
fileSystem2,
newName,
onCopySuccess,
fail
);
},
fail);
}

//6
function onCopySuccess(entry) {
$scope.$apply(function () {

alert(entry.nativeURL);

**// Display your captured image in the <img> tag**

$scope.urlImg = entry.nativeURL;

 **// you can able to save the above path into SQLite and display it back when you required – suggest me if the approach is wrong**


});
}

function fail(error) {
console.log("fail: " + error.code);
}

function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (var i=0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}

}, function(err) {
console.log(err);
});

答案 1 :(得分:0)

要在PhotoAlbum中保存img,请在选项相机中添加。

saveToPhotoAlbum: true

此选项意味着您将获得base64 / img,因此也可以更改它。

//destinationType: Camera.DestinationType.DATA_URL

destinationType: 1,//Camera.DestinationType.FILE_URI

最后保存您的网址

$cordovaCamera.getPicture(options).then(function (imageData) {
  someGreatFunctionToStoreURLInYourDB(imageData);
  //imageData is the URL to the sandbox
})

如果您想将照片保存在应用目录中,请使用此功能。

  

$ scope.cfd = cordova.file.dataDirectory;
  $ scope.ccd = cordova.file.cacheDirectory;

$cordovaCamera.getPicture(options).then(function (imageData) {
        var currentName = imageData.replace(/^.*[\\\/]/, '');
        var namePath = imageData.substr(0, imageData.lastIndexOf('/') + 1);
        //creacion de un objeto fileEntry apartir el URI de la camara
        window.resolveLocalFileSystemURL($scope.cfd, function(dirEntry){
          console.log(dirEntry);
          dirEntry.getFile(currentName, {
            create: true,
            exclusive: false
          }, function(fileEntry){
            $cordovaFile.writeFile($scope.cfd, currentName, fileEntry, true)
              .then(function(successCreate){

                console.log(successCreate.target.localURL);
                $scope.imagenes.push(currentName);

              }, function(errorCreate){
                console.log(errorCreate);
              });
          });

        });            
})