PhoneGap：使用LocalStorage存儲/檢索圖像

Question

我是PhoneGap的新手，我正在嘗試創建一個應用程序，該應用程序將包含一項功能，該功能將拍攝照片並將文件路徑（？）存儲在本地存儲中，以便隨后可以將圖像與其他數據一起檢索。 我知道本地存儲不允許用戶存儲大量數據，但是對於這個應用程序，我只是想暫時使用本地存儲。 這是保存文本數據的本地存儲的簡化版本：

$(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);
}

...這是我用來拍攝照片並將照片存儲在用戶相冊中的代碼...

var pictureSource;   
var destinationType; 

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

      smallImage.style.display = 'block';

      smallImage.src = "data:image/jpeg;base64," + imageData;

    }

    function capturePhotoEdit() {
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL, saveToPhotoAlbum: true});
    }

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

    }    

如果有人可以通過將圖像的文件路徑與其他文本數據一起存儲來闡明如何檢索圖像，我將非常感激！ 我一直在尋找一個有用的教程，但似乎沒有解決我的問題的方法。

謝謝！！ （PS。對不起，此篇長帖子！）

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);

}