使用PhoneGap截取图片，在app中显示并保存到本地存储

Posted 2023-03-15

【中文标题】使用PhoneGap截取图片，在app中显示并保存到本地存储

【英文标题】：Using PhoneGap to capture image, display it in app and save to local storage

【发布时间】：2014-04-23 08:06:11

【问题描述】：

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

我想在我的 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  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"  class="footer" /></p>
  </div>
</div>

【问题讨论】：

好吧，看起来您将最后一个图像路径保存在会话存储中，但是您是否尝试在应用程序启动时查看此值？在cordova初始化之后，您应该尝试显示会话存储变量中的图像

我会试一试。我正在制作一个“单页应用程序”（即一个 HTML 文件中的所有页面）。我要求做的还有可能吗？更新：我尝试在科尔多瓦初始化时调用该值，但我什么也没有。我不确定 sessionStorage 是不是那个答案，我想我需要一些更永久的东西。

是的，当然可以。只需给我您应用的完整 javascript，我会尽力为您提供正确的指导

@Lixas，因为我使用的是单页应用程序，所以大部分代码都包含在一个 HTML 文件中，这真的很大。我怎样才能把它寄给你？

使用pastebin.com等服务

【参考方案1】：

基于我在http://pastebin.com/4gE2D00a收到的信息

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

现在，如果在这一步之前一切正常，你应该有最后一张图片的路径。从文件系统读取文件-研究 FileReader api

【讨论】：

按照您的建议，我在第 24 行周围添加了以下代码：function onDeviceReady() setTimeout(function() navigator.splashscreen.hide(); , 2000); sessionStorage.getItem('imagepath');警报（图像路径）；

alert('path:' + sessionStorage.getItem('imagepath'));

我尝试了您的建议，但没有收到任何警报（尚未使用 console.log。新的 pastebin 位于 pastebin.com/g3XFcjRn 抱歉没有看到您的最后评论，*** 更新正在对我起作用今晚。

当我把那行代码放在 'sessionStorage.setItem('imagepath', entry.fullPath);' 下面时它就可以工作了但不是在 onDeviceReady 上，它一直显示为 null。当您双击主页按钮并从进程中删除应用程序时，会话存储是否会被擦除？我觉得我在追求错误的解决方案......

可能是我关于 sessionStorage 的错误。关于 cordova 文档的说明，localStorage 提供了一个到 W3C 存储接口的接口。它允许将数据保存为键值对。注意：window.sessionStorage 提供相同的接口，但在应用启动之间被清除。所以，请尝试其他解决方案并使用 localStorage 保存图像路径并尝试从那里检索