CODEWITHSUNDEEP
cordovajquery-mobile
user1904337
user1904337

Reputation:

Phonegap: displaying image source path

I've been trying out PhoneGap on iOS using the following example code from the documentation. Now I want to add the source of the image last taken to the text area. If I have understood it correctly, the destinationType.FILE_URI is the file path, but how can I pass that as a string to the text area upon photo success?

Get source:

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

Complete code: 

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">    </script>

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

        // Wait for Cordova to connect with the device
        //
        document.addEventListener("deviceready",onDeviceReady,false);

        // Cordova is ready to be used!
        //
        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 inline 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 inline 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 });
        }

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

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

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

        </script>
</head>
<body>
    <div data-role="controlgroup" data-theme="e">
        <button onclick="capturePhoto();">Capture Photo</button>
        <button onclick="capturePhotoEdit();">Capture Editable Photo</button>
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button>
        <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
        <img style="display:none;" id="largeImage" src="" />
    </div>

    <div data-role="fieldcontain">
        <label for="textarea">Textarea:</label><br>
        <textarea name="textarea" id="textarea"></textarea>
    </div>
  </body>
</html>

Upvotes: 0

Views: 2081

Answers (1)

shanabus
shanabus

Reputation: 13115

It would seem that your onPhotoURISuccess(imageURI) function would be the best place to put that code. I see that there is already a console.log that is commented out for this. Instead, you could do something like:

$("#ELEMENT_WHERE_YOU_WANT_TO_SEE_URI").text( imageURI );

Where the big upper case selector is the id of the HTML element that you would like to populate the image URI with. Is that the #textarea element? That should be fine to add that anywhere inside your onPhotoURISuccess() function.

Upvotes: 1

Related Questions