Phonegap(3.0.0)首次尝试时相机未成功

时间:2013-09-06 05:44:54

标签: javascript android cordova camera

出于测试目的,我复制了phonegap camera API上的完整示例,并在onPhotoDataSuccess上发出警报以测试函数何时被触发。在拍摄的第一张照片上,警报将不会显示。但是,在第一次尝试后,警报将在照片保存后显示。

有什么建议吗?如果事情不清楚,我会很高兴更具体。

我在Android Galaxy S3上测试了以下代码

    <!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 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) {
      // 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.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>

----------更新1 ------------------

我已经在另一段代码上测试了它:

    (function () {
        $scroller = $('.scroller'),

        // Take a picture using the camera or select one from the library
        takePicture = function (e) {
            var options = {
                quality: 45,
                targetWidth: 1000,
                targetHeight: 1000,
                destinationType: Camera.DestinationType.FILE_URI,
                encodingType: Camera.EncodingType.JPEG,
                sourceType: Camera.PictureSourceType.CAMERA
            };

            navigator.camera.getPicture(
                function (imageURI) {
                    console.log(imageURI);
                    alert('test');
                    $scroller.append('<img src="' + imageURI + '"/>');
                },
                function (message) {
                    // We typically get here because the use canceled the photo operation. Fail silently.
                }, options);

            return false;

        };

    $('.camera-btn').on('click', takePicture);

}());

这具有相同的效果。它在第一次拍摄时不执行任何操作,但在第二次拍摄后显示图片。我还发现第二张照片后拍摄的照片是我拍摄的第一张照片。似乎getPicture中的第一个参数在第一次捕捉时没有触发。这令人沮丧,因为logcat并没有真正向我展示任何可用的东西。

---------------- UPDATE 2 ----------------

我刚刚在Phonegap Build上尝试过,它可以运行。所以它必须与插件有关...

6 个答案:

答案 0 :(得分:1)

我不知道这是否是正确的解决方案,但它对我的工作完美无缺。追踪您的日志猫并找到确切的问题将是一件好事。

尝试使用navigator.camera.PictureSourceType pictureSource。所以它看起来像

<button onclick="getPhoto(navigator.camera.PictureSourceType.PHOTOLIBRARY);">From Photo Library</button><br>

以及同样的方式替换Javascript代码

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI });

OR

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URI });

<强>更新 尝试在本地保存corodova.js并从本地目录调用,所以你的目录应该

assets/www/js/cordova.js

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

Working Code

希望这会对你有帮助!!!

答案 1 :(得分:1)

从3.0.0更新到3.1.0后,我遇到了同样的问题。延迟摄像头,没有地理定位等。

查看文件platforms\android\cordova\version是否陈述旧版本。 然后,您需要更新您的平台。所以这就是我所做的。

  • 删除所有插件:cordova plugin rm org.apache.cordova.camera
  • 删除平台:cordova platform remove android(将删除您对* .java文件所做的更改)
  • 添加平台:cordova platform add android
  • 添加所有插件:cordova plugin add org.apache.cordova.camera
  • 检查权限
  • 构建

这基本上就像创建一个新项目一样。

答案 2 :(得分:0)

有完全相同的问题。捕获成功只是在第二次调用captureVideo后才收到回调。

刚刚用新的3.2.0 cordova-dev.jar(在eclispe中)替换了我的旧app / bin / cordova.jar文件,所有文件都按顺序替换:)

答案 3 :(得分:0)

我在Cordova 3.4.0上遇到了这个确切的问题,安装了新的Cordova(没有其他人发布的以前版本升级)。拍摄第一张照片将无所作为 - 没有成功的回调,没有失败的回调。拍摄第二张照片会导致成功回调,但返回的DATA_URL数据(base64编码图像)是来自FIRST图片的数据。

对我而言,它在一部手机,各种模拟器等上运行良好,除了在一台Android 4.2手机上执行此操作。解决方案是在设置下使用手机的应用程序管理从手机中卸载应用程序,然后重新安装应用程序 - 然后第一张图片将触发成功回调及其自己的数据。

不知道为什么,但卸载并重新安装应用程序可以解决它。

答案 4 :(得分:0)

我遇到了同样的问题并解决了它。因为您在应用中导入了两个“cordova.js”,也许一个在iframe中。你可以在iframe中使用“parent.cordova”。

答案 5 :(得分:0)

我在Cordova 3.7.1和Camera 0.3.5上遇到了这个问题 - 每次调用插件时,它都没有返回图像/路径,在第二次调用时,它返回错误“已取消”前一次调用。

问题是我的主要活动有自己的onActivityResult,它没有正确调用super的方法。

public class MainActivity extends CordovaActivity {
    //...

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
            if (requestCode == MyCustomActivity) {
                    doMyCustomActivity(requestCode);
            }
    }

    //...
}

要修复它,我必须添加ELSE来调用正确的处理程序:

public class MainActivity extends CordovaActivity {
    //...

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
            if (requestCode == MyCustomActivity) {
                    doMyCustomActivity(requestCode);
            }
            else { //this was missing - call other Activity of plugins
                super.onActivityResult(requestCode, resultCode, intent);
            }
    }

    //...
}