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

}

PhoneGap：使用LocalStorage存储/检索图像

1 个答案: