Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS

Jérôme picture Jérôme · Apr 26, 2012 · Viewed 45.9k times · Source

I'm currently building an app for iOS using Phonegap/Cordova and jQuerymobile. The idea is to take photos with camera and store the captured image for future use. I would like to store the path/filename into my local database and to move the picture file to a persistent place in the iPhone.

Could someone provide me with an example ?

Answer

Jérôme picture Jérôme · Apr 28, 2012

Ok, here is the solution.

  • in the Html file

  • I have an image tag for displaying the picture taken by the camera :

  • I have a button that runs a function for taking photo : Capture Photo

  • The function to capture photo is (when the photo is taken, the scr of the 'smallImage' id is populated with the path of the photo)

    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);
    }
    
  • Now I want to move the picture in a permanent folder and then save the link into my database :

    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);
    }
    
  • My file has been saved in the database to display it, i put "file://" front of the row that contains the image src

Hope this help. J.

P.S. : - many thanks to Simon Mac Donald (http://hi.im/simonmacdonald) for his post on googledocs.