CODEWITHSUNDEEP
cordovaphonegap-plugins
user2110655
user2110655

Reputation:

phonegap camera api store image

I am new to all this so please be patient. I am trying to do my first ever phonegap app using also the camera api as per http://docs.phonegap.com/en/2.6.0/cordova_camera_camera.md.html#cameraOptions example.

I got it to work, but when I move away from the page and then return, the image is gone. How do I save it locally so that when I open the page, all the images taken with this app, is still there?

I presume this would involve a websql with a url to the image? Do you know of any tutorials out there?

I hope I am explaining this correctly.

My example is basically a direct copy from the Phonegap site:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title></title>
<!-- Extra Codiqa features -->
  <link rel="stylesheet" href="codiqa.ext.css">
  <link href="css/themes/default/main_plain.css" rel="stylesheet" type="text/css">
  <link href="css/themes/curatio.min.css" rel="stylesheet" type="text/css">
  <link href="css/themes/default/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css">
  <!--<link href="css/themes/default/jquery.mobile-1.3.2.min_plain.css" rel="stylesheet" type="text/css">-->

  <!-- jQuery and jQuery Mobile -->
  <script src="js/jquery.js"></script>
  <script src="js/jquery.mobile-1.3.2.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The in-line CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
       console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The in-line CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
      quality: 50,
      destinationType: destinationType.DATA_URL, 
      sourceType : Camera.PictureSourceType.CAMERA,
      allowEdit : true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 300,
      targetHeight: 380,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: true });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL, saveToPhotoAlbum: true });
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source, saveToPhotoAlbum: true  });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>


<div data-role="page" id="page1">
    <div data-theme="c" data-role="header">
        <!--<h3>
            Curatio
        </h3>-->
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="usermenu.html" rel="external" data-transition="fade" data-theme="" data-icon="edit"
                    class="ui-btn-active ui-state-persist">
                        Menu
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="" data-icon="search">
                        Search
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="" data-icon="alert">
                        Reminders
                    </a>
                </li>
                <li>
                    <a href="map.html" rel="external" data-transition="fade" data-theme="" data-icon="info">
                        Contact
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="content">
        <h3>
            Diagnostic Imaging
        </h3>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>

    <img style="display:none;width:300px;height:400px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
    </div>

Upvotes: 0

Views: 1455

Answers (1)

Christian Kuetbach
Christian Kuetbach

Reputation: 16060

You will need to save the image to the filesystem by changing the destinationType:

destinationType: destinationType. FILE_URI

Within you onPhotoDataSuccess you will get the path to the image and can load it again (later).

As in every single page app, you will need to store the state. If you navigate away from your page, the state is gone.

Upvotes: 2

Related Questions