Захват и сохранение снимка, сделанного камерой, в локальную базу данных / PhoneGap / Cordova / iOS

Question

В настоящее время я создаю приложение для iOS, используя Phonegap/Cordova и jQuerymobile. Идея состоит в том, чтобы делать фотографии с помощью камеры и сохранять захваченное изображение для будущего использования. Я хотел бы сохранить путь / имя файла в моей локальной базе данных и переместить файл изображения в постоянное место в iPhone.

Может ли кто-нибудь привести мне пример?

Answer 1

Хорошо, вот решение.

• в HTML-файл

• У меня есть тег изображения для отображения изображения, сделанного камерой:

• У меня есть кнопка, которая запускает функцию для фотографирования: Захват фото

• Функция для захвата фотографии (когда фотография сделана, экран идентификатора smallImage заполняется путем пути к фотографии)

  function capturePhoto() {
  // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
  }
  
  //Callback function when the picture has been successfully taken
  function onPhotoDataSuccess(imageData) {                
      // Get image handle
      var smallImage = document.getElementById('smallImage');
  
      // Unhide image elements
      smallImage.style.display = 'block';
      smallImage.src = imageData;
  }
  
  //Callback function when the picture has not been successfully taken
  function onFail(message) {
      alert('Failed to load picture because: ' + message);
  }
  

• Теперь я хочу переместить картинку в постоянную папку, а затем сохранить ссылку в моей базе данных:

  function movePic(file){ 
      window.resolveLocalFileSystemURI(file, resolveOnSuccess, resOnError); 
  } 
  
  //Callback function when the file system uri has been resolved
  function resolveOnSuccess(entry){ 
      var d = new Date();
      var n = d.getTime();
      //new file name
      var newFileName = n + ".jpg";
      var myFolderApp = "EasyPacking";
  
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {      
      //The folder is created if doesn't exist
      fileSys.root.getDirectory( myFolderApp,
                      {create:true, exclusive: false},
                      function(directory) {
                          entry.moveTo(directory, newFileName,  successMove, resOnError);
                      },
                      resOnError);
                      },
      resOnError);
  }
  
  //Callback function when the file has been moved successfully - inserting the complete path
  function successMove(entry) {
      //I do my insert with "entry.fullPath" as for the path
  }
  
  function resOnError(error) {
      alert(error.code);
  }
  

• Мой файл был сохранен в базе данных, чтобы отобразить его, я поставил "file://" перед строкой, которая содержит изображение src

Надеюсь, это поможет. J.

PS: - большое спасибо Саймону Мак Дональду (http://hi.im/simonmacdonald) за его пост о googledocs.

Answer 2

Ответ Джерома работает как очарование... единственное, на что нужно указать людям, когда они хотят использовать файл, не используйте entry.fullPath, так как это может иногда вызывать проблемы, используйте entry.toURL(), поскольку это даст вам полную путь без необходимости добавлять "file://" к пути, а также обходить такие проблемы, как хранение на SD-карте.

Answer 3

if (index == '0')
{
    var options = {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false,
        correctOrientation:true
    };

    $cordovaCamera.getPicture(options).then(movePic,function(imageData) {
        $rootScope.imageUpload=imageData;
    }, function(err) {
        console.error(err);
    });

    function movePic(imageData){
        console.log("move pic");
        console.log(imageData);
        window.resolveLocalFileSystemURL(imageData, resolveOnSuccess, resOnError);
    }

    function resolveOnSuccess(entry){
        console.log("resolvetosuccess");

        //new file name
        var newFileName = itemID + ".jpg";
        var myFolderApp = "ImgFolder";

        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
            console.log("folder create");

            //The folder is created if doesn't exist
            fileSys.root.getDirectory( myFolderApp,
                {create:true, exclusive: false},
                function(directory) {
                    console.log("move to file..");
                    entry.moveTo(directory, newFileName,  successMove, resOnError);
                    console.log("release");

                },
                resOnError);
        },
        resOnError);
    }

    function successMove(entry) {
        //I do my insert with "entry.fullPath" as for the path
        console.log("success");
        //this is file path, customize your path
        console.log(entry);
    }

    function resOnError(error) {
        console.log("failed");
    }

}

Answer 4

Я только что сделал, который работает с обещаниями, основываясь на ответе Жерома выше:

function moveFile(file){

    var deferred = $q.defer();

    window.resolveLocalFileSystemURL(file,
        function resolveOnSuccess(entry){

            var dateTime = moment.utc(new Date).format('YYYYMMDD_HHmmss');
            var newFileName = dateTime + ".jpg";
            var newDirectory = "photos";

            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {

                    //The folder is created if doesn't exist
                    fileSys.root.getDirectory( newDirectory,
                        {create:true, exclusive: false},
                        function(directory) {

                            entry.moveTo(directory, newFileName, function (entry) {
                                //Now we can use "entry.toURL()" for the img src
                                console.log(entry.toURL());
                                deferred.resolve(entry);

                            }, resOnError);
                        },
                        resOnError);
                },
                resOnError);
        }, resOnError);

    return deferred.promise;
}

function resOnError(error) {
    console.log('Awwww shnap!: ' + error.code);
}

Answer 5

Есть 3 шага:

1. Получи фото. У Apple есть хороший пример для этого на сайте разработчиков iPhone
2. Получите ваш каталог документов, вот так:

   
   NSArray *arrayPaths = NSSearchPathForDirectoriesInDomains(
               NSDocumentDirectory,
               NSUserDomainMask,
               YES);
   NSString *docDir = [arrayPaths objectAtIndex:0];
   

3. И, наконец, сохраняем UIImage, который вы получили в шаге 1, на диск:

   
   NSString *filename = @"mypic.png";
   NSString *fullpath = [docDir stringByAppendingPathComponent:filename];
   [UIImagePNGRepresentation(image) writeToFile:fullpath atomically:YES];