将使用相机拍摄的照片捕获并存储到本地数据库/PhoneGap/Cordova/iOS

Posted

技术标签:

【中文标题】将使用相机拍摄的照片捕获并存储到本地数据库/PhoneGap/Cordova/iOS【英文标题】:Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS 【发布时间】:2012-05-07 07:29:39 【问题描述】:

我目前正在使用 Phonegap/Cordova 和 jQuerymobile 为 ios 构建一个应用程序。这个想法是用相机拍照并存储捕获的图像以供将来使用。我想将路径/文件名存储到我的本地数据库中,并将图片文件移动到 iPhone 中的一个持久位置。

谁能给我一个例子?

【问题讨论】:

【参考方案1】:

好的,这就是解决方案。

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

我的文件已保存在数据库中以显示它,我将“file://”放在包含图像 src 的行的前面

希望对您有所帮助。 J.

附: : - 非常感谢 Simon Mac Donald (http://hi.im/simonmacdonald) 在 googledocs 上的帖子。

【讨论】:

此解决方案是否适用于在 Microsoft Access 数据库中嵌入图像? @Jerome,你能给我提供这个工作的例子吗?我正在使用它,但它不起作用。 你在哪里调用这个函数 movePic(file) ? 我唯一不明白的是你在哪里调用 movePic 函数 您可以在 onPhotoDataSuccess() 中调用 movePic(file) 或在某个按钮上单击某处。对于那些想知道的人。【参考方案2】:

杰罗姆的回答就像一个魅力..当人们想要使用该文件时,唯一要指出的就是不要使用 entry.fullPath 因为这有时会导致问题,使用 entry.toURL() 因为这会给您无需在路径中添加“file://”即可获得完整路径,也无需绕过 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");
    


【讨论】:

这个编码对我有用,我声明 itemID 依赖于我的项目,你可以在 filename.jpg 中使用新名称 将 entry.fullPath 保存为本地存储中的图像 url 并在图像中再次绑定不起作用,它不显示图像 @Pritish 以上代码仅适用于选择的单个图像,而不是创建临时数组来选择多个图像并一键推送所有图像【参考方案4】:

根据上面 Jérôme 的回答,我刚刚做了一个适用于 Promise 的方法:

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

【讨论】:

很好的实现!我很想通过 .done() .failed() .always() 实现来看到这一点。还有,谢谢分享!【参考方案5】:

有3个步骤:

    获取照片。苹果有一个很好的例子on the iPhone dev site 获取您的 Documents 目录,如下所示:
    
    NSArray *arrayPaths = NSSearchPathForDirectoriesInDomains(
                NSDocumentDirectory,
                NSUserDomainMask,
                YES);
    NSString *docDir = [arrayPaths objectAtIndex:0];
    
    最后,将您在步骤 1 中获得的 UIImage 存储到磁盘:
    
    NSString *filename = @"mypic.png";
    NSString *fullpath = [docDir stringByAppendingPathComponent:filename];
    [UIImagePNGRepresentation(image) writeToFile:fullpath atomically:YES];
    

【讨论】:

非常感谢您的回答,我的帖子不清楚,我使用的是PhoneGap,而不是Objective C,我保持我的问题开放。

以上是关于将使用相机拍摄的照片捕获并存储到本地数据库/PhoneGap/Cordova/iOS的主要内容,如果未能解决你的问题,请参考以下文章

Android调用相机拍摄照片并显示到 ImageView控件中

如何使用 Cordova 相机插件拍摄多张照片

将相机捕获的图像保存到ios中的文档目录中[重复]

如何从相机捕获多张图像并使用位图将其编码为字符串?

使用PhoneGap截取图片,在app中显示并保存到本地存储

Android - 拍摄照片