15

I am quite new to phonegap and it says that it has a capture feature. So i used it and was very nice. However I displayed the picture in the html but i dont know how to save the image.

according to http://docs.phonegap.com/en/1.7.0/cordova_camera_camera.md.html

You can do whatever you want with the encoded image or URI, for example:

Render the image in an tag (see example below) Save the data locally (LocalStorage, Lawnchair, etc) Post the data to a remote server

Unfortunately there was no sample code on how to do it

How do i save image in LocalStorage or gallery of device?

2

2 Answers 2

23

Great you found the solution, I did it the following way. Hope it helps someone else.

Simply call capturePhoto function on button click event.

// A button will call this function
//
function capturePhoto() {
    sessionStorage.removeItem('imagepath');
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}

function onPhotoDataSuccess(imageURI) { 
        // Uncomment to view the base64 encoded image data
        // console.log(imageData);

        // Get image handle
        //
        var imgProfile = document.getElementById('imgProfile');

        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        imgProfile.src = imageURI;
        if(sessionStorage.isprofileimage==1){
            getLocation();
        }
        movePic(imageURI);
}

// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed 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 = "MyAppFolder";

    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) {
    //Store imagepath in session for future use
    // like to store it in database
    sessionStorage.setItem('imagepath', entry.fullPath);
}

function resOnError(error) {
    alert(error.code);
}

What this code does is

Captures image and stores it in MyAppFolder on device's SD Card. And stores imagepath in session so as to insert it in local database.

2
  • i could capture image but failed to save to local storage Apr 23, 2015 at 11:08
  • This code is well tested by me. Try debugging, anything in the logs? Are you getting any errors? Apr 30, 2015 at 10:56
9

Setting saveToPhotoAlbum in the options to True works nicely as well. Got that from the 2.9 docs here.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.