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

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

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

Ответы

Ответ 1

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

  • в файле Html

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

  • У меня есть кнопка, которая выполняет функцию для съемки: Capture Photo

  • Функция для захвата фотографии (когда фотография сделана, scr на значке '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.

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

Ответ 2

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

Ответ 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");
    }

}

Ответ 4

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

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);
}

Ответ 5

Есть три шага:

  • Получить фотографию. Apple имеет хороший пример для этого на веб-сайте iPhone
  • Получить каталог документов, например:
    
    NSArray *arrayPaths = NSSearchPathForDirectoriesInDomains(
                NSDocumentDirectory,
                NSUserDomainMask,
                YES);
    NSString *docDir = [arrayPaths objectAtIndex:0];
    
  • И, наконец, сохранение UIImage, полученного на шаге 1, на диск:
    
    NSString *filename = @"mypic.png";
    NSString *fullpath = [docDir stringByAppendingPathComponent:filename];
    [UIImagePNGRepresentation(image) writeToFile:fullpath atomically:YES];