javascript - Phonegap Camera API - 无法读取未定义的属性 'DATA_URL'

标签 javascript android cordova android-camera phonegap-build

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

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

SDK 和模拟器一切正常。

现在，当我从他们的网站运行示例相机脚本以使其正常工作时，我才开始对其进行定制。

每次我运行下面的代码(即使我有链接到 phonegap.js 的文件)它总是抛出错误。我的意思是脚本运行到 HTML 并显示按钮，但是当单击按钮时没有任何反应并且在日志中显示:无法读取未定义的属性“DATA_URL”。

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

我尝试将“destinationType.FILE_URI”添加到 capturePhoto() 和 capturePhotoEdit() 函数，但它们似乎仍然不起作用。

目前我已经尝试了以下三种:

destinationType.FILE_URI
destinationType.DATA_URI
Camera.desitnationType.DATA_URI

它们似乎都没有什么不同。

最佳答案

这是一个 Javascript 错误。您正在尝试访问 undefined variable 的属性。这一行(在 capturePhoto 和 capturePhotoEdit 方法中):

destinationType.DATA_URL

应该是:

Camera.DestinationType.DATA_URL

还有一件事:对于 Cordova，手头有文档总是好的，每次使用新插件或升级到较新版本时(它们往往会更改 API)，请查看它们经常，因此在 Google 中找到的示例通常显示遗留代码)。这里有 Camera plugin documentation .

关于javascript - Phonegap Camera API - 无法读取未定义的属性 'DATA_URL'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22834145/

上一篇：使用 VITamio 播放器将 android View(actionbar 等)推高

下一篇：android - EditText 改变样式

相关文章：

asp.net - 基于 Asp Web 应用程序创建电话应用程序

javascript - 在 Typescript 上使用带有本地参数的 toLocaleLowerCase 方法

javascript - CSS渐变无法刷新

javascript - 如何在 Phonegap 的 SQLITE 中检查列是否存在

android - 如何使 PreferenceFragment 与 MainActivity 一起工作

使用媒体播放器播放音频文件的 Android 问题

cordova - 使用phonegap和asp.net mvc 4登录

javascript - 在函数外部使用变量

javascript - Selenium 元素在 javascript 中的点(chrome)处不可点击

android - 与 Web 服务集成的 Android 应用程序开发的最佳实践是什么？

©2024 IT工具网  联系我们