Question

我是PhoneGap的新手，正在尝试弄清楚如何使用捕获插件。我使用的是Cordova 3.5.0。我已成功运行以下命令：

cordova plugin add org.apache.cordova.media-capture

我已经阅读了HTML页面中包含cordova.js或phonegap.js的示例。但是，Cordova创建的项目层次结构中都不存在任何文件，因此我不知道如何包含它。我还读到这个文件是由Cordova在构建时自动注入的。因此，就包含任何JavaScript文件而言，我只包含我自己的JavaScript文件。在JavaScript文件中，我有代码执行此操作以进行测试：

alert(navigator.device);
navigator.device.capture.captureImage(function(files) {
    alert(files);
}, function(error) {
    alert(error);
});

第一个警告显示navigator.device未定义。我在android模拟器上运行这个应用程序。要运行该应用，我正在做：

cordova emulate android

我认为我需要包含或设置一些东西以使其正常工作。非常感谢任何帮助。

Answer 1

欢迎来到Cordova！

首先，我建议你检查一下，无论你是否正确安装了npm等。在这里查看教程 - ＆gt; CLI-Guide＆lt; - 。之后，您应该在终端上构建一个全新的项目。您应该使用这些命令来执行此操作 - ＆gt;

cd ~/desktop
cordova create media media.example.com media
cd media
cordova platform add android
cordova plugin add org.apache.cordova.camera（不是媒体捕捉）
cordova plugin add org.apache.cordova.console（不要使用警报，使用控制台更容易： - ））
cordova build

所以，现在打开你的文件夹。应该有一个类似media/platforms/android/assets/www的目录，在此目录中，您应该找到cordova.js和cordova_plugins.js。

下一个问题：你的相机！

安装了所有内容后，如我所说，并检查了您的$PATH变量（终端中的echo $PATH）等，您可以在index.html中尝试使用此代码来检查相机是否相符 - 插件工作与否：

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

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

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

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    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 in-line 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 in-line 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>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</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="" />
  </body>
</html>

所以...也许你现在试着为我测试我的建议并给我一个反馈，如果它有效，或者我可以帮助你更多:-)！

编辑尼克的答案 - ＆gt;标准Cordova index.html代码：

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <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" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

Answer 2

我想我需要在HTML页面中添加以下内容：

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

虽然项目层次结构中不存在该文件，但在构建应用程序时会生成该文件。该文件不会自动注入您的HTML页面，仍需要手动将其包含在所需的位置。

PhoneGap：使用navigator.device捕获插件未定义

2 个答案: