Using PhoneGap to capture image, display it in app and save to local storage

Question

I have noticed many similar posts about this issue but after reading through them I don't seem to have found my answer.

I want a "view" in my JQM PhoneGap app to take a picture from camera or Photo Library and insert it into the view/screen and also save it to local storage.

When a user exits the app session and removes the application from processes running on the phone (i.e. iOS double tap home button and swipe up on application to remove its processes) - I want the data to persist so that it will be retrieved from Local Storage and the last captured image be visible when the app is opened again and user navigates to the specific view/screen. The existing image can be overwritten with a new one.

I have followed the posting by Jérôme @ Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS and it captures and displays the image OK. But when I remove the app from running on my iPhone and restart it, it does not retrieve the last captured image from Local Storage.

Perhaps there is something that I am missing here? Here is the code for the whole page (bear in mind this is one page of a single page app, everything is combined into 'index.html':

<div id="Ccamera-fun" data-role="page" data-title="Camera Fun Activity">
  <header data-role="header" data-theme="e" data-position="fixed">
      <a href="#" data-rel="back" data-theme="h" data-icon="arrow-l" data-direction="reverse">Back</a>
      <h1>3.5 years - 4.5 years</h1>
  </header>
  <div data-role="content" data-theme="a" class="content">
   <h1>Camera Fun</h1>
   <div id="imageContainer"></div>
    <img width="99%" id="imgProfile" src="" />
   <p>Use your photos and ask your child to describe one in detail. Use your photos as picture talks where your child can share their memories and recall events before or after the photo was taken. <strong>Together you could invent their own story.</strong></p>
    <p>Use the buttons below to take a picture with your phone or select an image from your phone&rsquo;s Photo Library. Once you have selected a photo, it will be embedded into the top of this screen.</p>

<script type="text/javascript" charset="utf-8">
// A button will call this function
//
function takePhoto() {
    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;
        imgProfile.style.display = 'block';
        imgProfile.style.border = '2px solid #ccc';
        imgProfile.style.marginTop = '10px';
        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);
}

</script>
   <button onclick="takePhoto();" data-theme="h">Take a Picture</button>
 </p>
    <p><img src="img/DETE-footer.png" width="320" class="footer" /></p>
  </div>
</div>

Answer 1

based on what I have received in http://pastebin.com/4gE2D00a

You save you image path with sessionStorage.setItem('imagepath', entry.fullPath);@2320 line. To read this value you should use sessionStorage.getItem('imagepath') check what you have in this variable with alert or console.log right after cordova initialization @24

Now, if everything is right before this step, you should have path of last image. To read file from filesystem- study FileReader api