Question

在我的iPhone phonegap应用程序中，我想使用设备的相机捕获图像。我已经完成了以下代码，但它不起作用。无法捕获图像。在HTML部分的以下代码中，我有一个按钮，当它单击时，我将调用java脚本定义的方法。

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

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

        // Wait for PhoneGap to connect with the device
        function onLoad() {
            document.addEventListener("deviceready",onDeviceReady,false);
        }

        // PhoneGap is ready to be used!
        function onDeviceReady() {
            pictureSource=navigator.camera.PictureSourceType;
            destinationType=navigator.camera.DestinationType;
        }

        // Called when a photo is successfully retrieved (taken with camera)
        function onPhotoDataSuccess(imageData) {
            alert("Your photo was taken successfully.");            
        }

        // Called when a photo is successfully retrieved (out of the device's library)
        function onPhotoURISuccess(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;

            var options = new FileUploadOptions();
            options.fileKey="file";
            //options.fileName="newfile.txt";
            options.mimeType="image/jpeg";

            var params = new Object();
            params.value1 = "test";
            params.value2 = "param";

            options.params = params;

            var ft = new FileTransfer();
            ft.upload(imageURI, "http://www.yourdomain.com/upload.php", win, fail, options);
            // Make sure you use your own site!

        }

        // Success reporting
        function win(r) {
            alert("Code = " + r.responseCode);
            alert("Response = " + r.response);
        }

        // Error reporting
        function fail(message) {
            alert('Failed because: ' + message);
        }

        function capturePhoto() {

            // Take picture using device camera and retrieve image as base64-encoded string
            navigator.camera.getPicture(onPhotoDataSuccess, fail, { quality: 30 });
        }

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

        </script>
</head>

<body onload="onLoad()">

    <button onclick="capturePhoto();">Take a Photo</button>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Upload a Photo</button>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />

</body>

Answer 1

请您尝试使用以下代码段。
它从摄像头捕获图像，并加载img标记。我在设备上测试过。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PGCamera</title>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">
    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    /* When this function is called, PhoneGap has been initialized and is ready to roll */
    function onDeviceReady()
    {
        // do your thing!
    }
  function PictureSourceType() {};
    PictureSourceType.PHOTO_LIBRARY = 0;
    PictureSourceType.CAMERA = 1;
  function getPicture(sourceType){
     var options = { quality: 10 };
     if (sourceType != undefined) {
          options["sourceType"] = sourceType;
     }
     // if no sourceType specified, the default is CAMERA 
     navigator.camera.getPicture(getPicture_Success, null, options);
  }; 
  function getPicture_Success(imageData){
         alert("getpic success");
        document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData;
  }
  </script>
</head>
<body onload="onBodyLoad()">     
  <img style="width:60px;height:60px" id="test_img" src="" /> 
  <!-- for testing, add the buttons below -->
  <button onclick="getPicture()">From Camera</button>
  <button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button>
  </body>
</html>

感谢， MAYUR

使用javascript的iphone手机间隙应用程序

1 个答案: