Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Save image in local storage phonegap

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?

like image 898
jhdj Avatar asked Feb 18 '13 01:02

jhdj


1 Answers

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.

like image 183
Amol Chakane Avatar answered Nov 03 '22 21:11

Amol Chakane