web-dev-qa-db-ja.com

カメラで撮影した写真をキャプチャしてローカルデータベースに保存する/ PhoneGap / Cordova / iOS

現在、Phonegap/CordovaとjQuerymobileを使用してiOS用のアプリを構築しています。カメラで写真を撮り、取り込んだ画像を将来使用するために保存するのが目的です。パス/ファイル名をローカルデータベースに保存し、画像ファイルをiPhoneの永続的な場所に移動したいと思います。

誰かが例を教えてくれませんか？

ioscordovacameralocal-storagephonegap-build
15
Jérôme

はい、これが解決策です。

  • htmlファイル

  • カメラで撮った写真を表示するための画像タグがあります。

  • 写真を撮るための機能を実行するボタンがあります：写真のキャプチャ

  • 写真をキャプチャする機能は次のとおりです（写真が撮影されると、「smallImage」IDのscrに写真のパスが入力されます）

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

  • 私のファイルはそれを表示するためにデータベースに保存されました、私は画像srcを含む行の前に "file：//"を置きます

この助けを願っています。 J.

追伸：-googledocsへの投稿に対してSimon Mac Donald（http://hi.im/simonmacdonald）に感謝します。

36
Jérôme

ジェロームの答えは魅力のように機能します..ファイルを使用するときに人々に指摘する唯一のことは、entry.fullPathを使用しないでください。これは問題を引き起こす可能性があるため、entry.toURL（）を使用してください。パスに「file：//」を追加する必要がないパス、およびSDカードストレージなどの問題を回避するパス。

2
MothyCK
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");
    }

}
1
manoz

上記のジェロームの答えに基づいて、私は約束を果たしただけをしました：

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);
}
0
Mr Benn