Question

我一直在使用文档中的以下示例代码在iOS上尝试使用PhoneGap。现在我想将最后拍摄的图像的源添加到文本区域。如果我已正确理解，则destinationType.FILE_URI是文件路径，但是如何在照片成功时将其作为字符串传递给文本区域？

获取来源：

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

完整代码：

<!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>

Answer 1

您的onPhotoURISuccess(imageURI)函数似乎是放置该代码的最佳位置。我看到已经有一个console.log被注释掉了。相反，你可以做类似的事情：

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

大型大写选择器是您希望用其填充图像URI的HTML元素的id。这是#textarea元素吗？将其添加到onPhotoURISuccess()函数内的任何位置都应该没问题。

Phonegap：显示图像源路径

1 个答案: