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

by

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.

Leave a Comment