Question

我已经注意到很多关于这个问题的类似帖子，但在阅读完之后我似乎没有找到答案。

我想在我的JQM PhoneGap应用程序中使用“视图”从相机或照片库中拍摄照片并将其插入视图/屏幕，并将其保存到本地存储。

当用户退出应用会话并从手机上运行的进程中删除应用程序时（即iOS双击主页按钮并向上轻扫应用程序以删除其进程） - 我希望数据保持不变以便检索来自本地存储，当再次打开应用程序并且用户导航到特定视图/屏幕时，可以看到最后捕获的图像。现有图像可以用新图像覆盖。

我跟随了Jérôme@ Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS的发布，它捕获并显示图像确定。但是当我删除应用程序在我的iPhone上运行并重新启动它时，它不会从本地存储中检索最后捕获的图像。

也许我在这里缺少一些东西？这是整个页面的代码（请记住，这是单页面应用程序的一页，所有内容都合并到'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

基于我在http://pastebin.com/4gE2D00a

中收到的内容

使用sessionStorage.setItem('imagepath', entry.fullPath); @ 2320行保存图像路径。要读取此值，您应该使用sessionStorage.getItem('imagepath')在cordova初始化后立即使用alert或console.log检查此变量中的内容@ 24

现在，如果在此步骤之前一切正常，您应该拥有最后一张图片的路径。从文件系统研究 FileReader api

中读取文件

使用PhoneGap捕获图像，在应用程序中显示并保存到本地存储

1 个答案: