Question

我正在使用Phonegap创建一个Android应用。

我已经使用他们网站上的命令安装了phonegap。

使用SDK和模拟器启动并运行一切。

现在，当我从他们的网站上运行示例相机脚本以使其工作之前我开始对其进行cusotmising。

每次我运行下面的代码（即使我将文件链接到phonegap.js），它仍然会抛出错误。我的意思是脚本运行到HTML并显示按钮，但是当单击按钮时没有任何反应，并且在日志中它说：无法读取属性＆＃39; DATA_URL＆＃39;未定义的。

    <!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="phonegap.js"></script>
        <link rel="stylesheet" href="css/foundation.css" />
        <script src="js/vendor/modernizr.js"></script>
        <title>Retouch</title>
        <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
        //
        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
        //
        function onPhotoDataSuccess(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 onPhotoFileSuccess(imageData) {
          // Get image handle
          console.log(JSON.stringify(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 = 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() {
          navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
            destinationType: destinationType.DATA_URL });
        }

        function capturePhotoEdit() {
          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: navigator.camera.DestinationType.FILE_URI,
         sourceType: pictureSource
    });

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

        </script>
    </head>
    <body>
      <!-- Navigation bar -->
        <div class="fixed">
          <nav class="top-bar fixed" data-topbar>
            <ul class="title-area">
              <li class="name">
                <h1 class="navmsg">
                  <script>
                  var Digital=new Date()
                  var hours=Digital.getHours()

                  if (hours>=5&&hours<=11)
                  document.write('<b>Good Morning.</b>')
                  else if (hours==12)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=13&&hours<=17)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=18&&hours<=20)
                  document.write('<b>Good Evening.</b>')
                  else if (hours>=21&&hours<=11)
                  document.write('<b>Hello!</b>')
                  else
                  document.write('<b>Hello!</b>')
                  </script>
                </h1>
              </li>
              <li class="toggle-topbar menu-icon"><a href="#">Account</a></li>
            </ul>
          </nav>
        </div>

        <button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
        <button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</button> <br>
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
        <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="" />

        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script>
          $(document).foundation();
        </script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>`

我试过使用以下内容：

<script type="text/javascript" src="phonegap.js"></script>

和

<script type="text/javascript" src="cordova.js"></script>

似乎没什么用。

我更改了CapturePhoto（）和capturePhotoEdit（）中的以下内容：

destinationType.DATA_URL

到

Camera.DestinationType.DATA_URL

功能仍然没有运气。我怀疑它与cordova插件和phonegap有关，因为我只在脚本中包含了phonegap.js。我还在阅读config.xml中的设置，这是我通过命令行完成的（除非我做错了）在文档之后。

我已经通过CL构建了应用程序：

phonegap build android

添加了cordova-2.5.0.js和destinationType.FILE_URI的以下代码已成功启用了getPhoto（）函数，并允许我在库/相册中显示照片。

    <!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="phonegap.js"></script>
        <link rel="stylesheet" href="css/foundation.css" />
        <script src="js/vendor/modernizr.js"></script>
        <title>Retouch</title>
        <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
        <script type="text/javascript" charset="utf-8">

        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
            //alert(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) {
            alert("inside large image")
            // 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.FILE_URI });
        }

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

        // 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>
      <!-- Navigation bar -->
        <div class="fixed">
          <nav class="top-bar fixed" data-topbar>
            <ul class="title-area">
              <li class="name">
                <h1 class="navmsg">
                  <script>
                  var Digital=new Date()
                  var hours=Digital.getHours()

                  if (hours>=5&&hours<=11)
                  document.write('<b>Good Morning.</b>')
                  else if (hours==12)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=13&&hours<=17)
                  document.write('<b>Good Afternoon.</b>')
                  else if (hours>=18&&hours<=20)
                  document.write('<b>Good Evening.</b>')
                  else if (hours>=21&&hours<=11)
                  document.write('<b>Hello!</b>')
                  else
                  document.write('<b>Hello!</b>')
                  </script>
                </h1>
              </li>
              <li class="toggle-topbar menu-icon"><a href="#">Account</a></li>
            </ul>
          </nav>
        </div>

        <button onclick="capturePhotoWithData();">Capture Photo With Image Data</button> <br>
        <button onclick="capturePhotoWithFile();">Capture Photo With Image File URI</button> <br>
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
        <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="" />

        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/foundation.min.js"></script>
        <script>
          $(document).foundation();
        </script>
    </body>
</html>

我尝试添加＆＃39; destinationType.FILE_URI＆＃39; capturePhoto（）和capturePhotoEdit（）函数，但它们似乎还不起作用。

我现在尝试了以下三种类型：

destinationType.FILE_URI
destinationType.DATA_URI
Camera.desitnationType.DATA_URI

他们似乎没有什么区别。

Answer 1

这是一个Javascript错误。您正在尝试访问未定义变量的属性。这一行（在capturePhoto和capturePhotoEdit方法中）：

destinationType.DATA_URL

应该是：

Camera.DestinationType.DATA_URL

还有一件事：使用Cordova，随时掌握文档并在每次使用新插件时查看它们，或者升级到更新版本（它们倾向于更改API）总是好的经常，因此Google中的示例通常显示遗留代码）。这里有Camera plugin documentation。

Answer 2

在我的情况下，当我暂停执行时，Camera有getPicture（）方法，但没有DestinationType和PictureSourceType属性。

$scope.tomarFoto = function(){
$ionicPlatform.ready(function() {
  var options = {
    quality: 50,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.CAMERA
  };

  $cordovaCamera.getPicture(options).then(function (imageData) {
    $scope.cameraimage = "data:image/jpeg;base64," + imageData;
  }, function (err) {
    console.log('Failed because: ' + message);
  });
});

Answer 3

<强>已更新我最近遇到了同样的问题。如果您添加了相机插件和所需的所有权限，主要是您执行了所有Phonegap Api步骤。我认为你的解决方案是转到你的项目文件夹并执行phonegap build或phonegap build app_platform。首先保存您的项目数据，导致该命令行重置项目的结构并删除您添加的文件。

让我知道这是否适合你，祝你好运。

Phonegap Camera API - 无法读取未定义的属性“DATA_URL”

3 个答案: