Save image in local storage phonegap

Question

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?

Solution 1

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.

Solution 2

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

Comments

[Sonia John Kavery]

i could capture image but failed to save to local storage

[Amol Chakane]

This code is well tested by me. Try debugging, anything in the logs? Are you getting any errors?