PhoneGap的:捕获插件与navigator.device未定义(PhoneGap: Captu

2019-10-20 19:54发布

我是新来的PhoneGap,我试图找出如何使用捕捉插件。 我使用的科尔多瓦3.5.0。 我已经成功地运行下面的命令:

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

我看了其中包括在HTML页面中的cordova.js或phonegap.js例子。 然而,无论文件存在在科尔多瓦创造,所以我不知道如何将它包含的项目层次结构。 我也看到了这个文件是由科尔多瓦在构建时自动注入。 至于象包括任何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:

并欢迎科尔多瓦!

首先要明确的,我建议你检查,你是否已经安装了故宫等的正确途径。 检查教程看过来- > CLI-指南 < - 。 在此之后,你应该建立在你的终端共新项目。 你应该使用这些命令来做到这一点 - >

  • 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.jscordova_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>

所以...也许你现在要来测试我建议你给我一个反馈,如果它的工作,或在那里我可以帮助你更:-)!

编辑从尼克应答- >标准科尔多瓦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: Capture plugin with navigator.device undefined