PhoneGap: Speichern/Abrufen von Image mit LocalStorage

Question

Ich bin neu in PhoneGap und ich versuche, eine Anwendung zu erstellen, die eine Funktion enthält, die ein Foto aufnehmen und den Dateipfad (?) Im lokalen Speicher speichern wird Das Bild kann dann zusammen mit anderen Daten abgerufen werden. Ich weiß, dass der lokale Speicher es einem Benutzer nicht erlaubt, eine große Menge an Daten zu speichern, aber für diese App suche ich nur den lokalen Speicher nur für den Moment. Hier ist eine abgestumpft abgespeckte Version meiner lokalen Speicher Speichern der Textdaten:

$(function() { 
    $('[type=submit]').on('click', function (e) { 
     userList.addUser(
      $('#name').val(), 
      $('#address').val(), 
      $('#message').val(), 
     ); 
     $('input:text').val(''); 
     return false; 
    }); 

    $('#users').on('click', '.delete', function (e) { 
     userList.deleteUser(parseInt($(this).parent().find('.key').text())); 
     return false; 
    }); 

    $('#users').on('click', '.update', function (e) { 

     var name = $(this).parent().find('.name').text(); 
     var address = $(this).parent().find('.address').text(); 
     var type = $(this).parent().find('.message').text(); 
     var key = parseInt($(this).parent().find('.key').text()); 
     userList.updateUser(name,address,message,key); 
     return false; 
    }); 

    userList.open(); 

}); 

userList = {}; 

userList.open = function() { 
    this.list = { }; 
    if (localStorage.userList) { 
     this.list = JSON.parse(localStorage.userList); 
    } 
    userList.getAllUsers(); 
};  

userList.addUser = function(name,address,message) { 
console.log(arguments.callee.name, arguments); 
key = new Date().getTime(); 
this.list[key] = { 
'name':name,'address':address,'message':message 
}; 
localStorage.userList = JSON.stringify(this.list); 
this.getAllUsers(); 
}; 

userList.getAllUsers = function() { 
    $('#users').html(''); 
    for (var key in this.list) { 
     renderUser(key, this.list[key]); 
    } 
}; 

userList.deleteUser = function(id) { 
    console.log(arguments.callee.name, arguments); 
    delete this.list[id]; 
    localStorage.userList = JSON.stringify(this.list); 
    this.getAllUsers(); 
}; 

userList.updateUser = function(name,address,message,key) { 
console.log(arguments); 
this.list[key]['name'] = name; 
this.list[key]['address'] = address; 
this.list[key]['message'] = message; 
localStorage.userList = JSON.stringify(this.list); 
this.getAllUsers(); 
}; 

function renderUser(key,value) { 
    console.log(arguments); 
    var li = '<li><span class="name" contenteditable="true">'+value.name+'</span> &nbsp; '; 
    li += '<span class="address" contenteditable="true">'+value.address+'</span> &nbsp; '; 
    li += '<span class="message" contenteditable="true">'+value.message+'</span> &nbsp; '; 
    li += '<a href="#" class="update">[Update]</a> &nbsp; '; 
    li += '<a href="#" class="delete">[Delete]</a><span class="key">'+key+'</span></li>'; 
    $('#users').append(li); 
} 

... und hier ist der Code, den ich habe, dass ein Foto aufnimmt und speichert das Foto im Benutzer-Fotoalbum ...

Wenn jemand etwas Licht darauf werfen könnte, wie ich ein Bild abrufen kann, indem ich vielleicht seinen Dateipfad zusammen mit einigen anderen Textdaten speichere, wäre ich sehr dankbar! Ich habe mich nach einem hilfreichen Tutorial umgeschaut, aber für mein Problem scheint nichts auszurichten.

Vielen Dank !! (PS. Sorry für diese lange Post!)

Answer 1

var pictureSource; 
var destinationType; 
function onPhotoDataSuccess(imageData) { 
    var smallImage = document.getElementById('smallImage'); 

    smallImage.style.display = 'block'; 

    smallImage.src = "data:image/jpeg;base64," + imageData; 
    photo = "data:image/jpeg;base64," + imageData; 
    localStorage.setItem('photo', photo); 

} 
function capturePhotoEdit() { 
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, 
     { 
      quality: 20, 
      destinationType: Camera.DestinationType.DATA_URL, 
      sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY, 
      encodingType: Camera.EncodingType.JPEG 
     }); 
} 

function onFail(message) { 
    alert('Failed because: ' + message); 

}