Phonegap(3.0.0)首次尝试使用相机失败。

8
为了测试目的,我复制了在phonegap相机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并没有真正向我展示任何可用的信息。

---------------- 更新2 ----------------

我刚在Phonegap Build上尝试过它,它可以工作。所以这一定与插件有关...


如果有人知道的话,我真的需要一个答案。这是针对3.0.0还是3.0.0rc1? - Joseph Dailey
1
你能把你正在使用的代码粘贴过来,并告诉我们你正在测试哪款手机吗? - Zorayr
你正在开发iOS吗?从PhoneGap文档中可以了解到:“在任何一个回调函数中包含JavaScript alert()都可能导致问题。将alert包装在setTimeout()中,以便iOS图片选择器或弹出窗口在显示警告之前完全关闭:”如果你将alert改为console.log,第一个回调函数会起作用吗? - ville
我已经在两部安卓手机上进行了测试,但第一次拍照时仍然无法获取图像。我必须再拍一张才能看到图像。我还为onPhotoDataSuccess添加了一个警报,但只有在第二张照片被拍摄后才会出现。我也尝试过使用“phonegap build android”和“cordova build android”。我不确定它们之间是否有区别,但两种结果都是相同的。 - Ian Powell
你使用的PhoneGap版本是什么? - Volodymyr Bezuglyy
6个回答

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 });

或者

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

更新: 尝试将您的cordova.js保存在本地并从本地目录调用,因此您的目录应该类似于

assets/www/js/cordova.js

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

工作代码

希望这能对你有帮助!


navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );看起来cameraSuccess是在拍第二张照片时发生的,但我得到的图像却是我拍的第一张。 - Ian Powell
在第一张照片拍摄时,不会显示警报。但是,在第一次尝试之后,当照片保存后,警报将会显示。这种情况真的发生在你身上吗?我已经测试了你的代码,并在onPhotoDataSuccess中调用了alert(),它完美地工作了。 - Chintan Khetiya

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
  • 检查权限
  • 构建它
它基本上就像创建一个新项目。

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);
            }
    }

    //...
}

0

我在 Cordova 3.4.0 上遇到了这个确切的问题,使用全新的 Cordova 安装(没有从以前的版本升级,就像其他一些人发布的那样)。拍摄第一张照片什么也不会发生-没有成功回调,也没有失败回调。拍摄第二张照片将导致成功回调,但返回的 DATA_URL 数据(base64 编码的图像)是来自第一张照片的数据。

对我来说,在一个手机、各种模拟器等上都很好用,除了一个 Android 4.2 手机出现了这个问题。解决方法是使用手机设置下的应用程序管理从手机中卸载应用程序,然后重新安装应用程序-然后第一张照片将触发成功回调并带有自己的数据。

不知道为什么,但是对我来说卸载和重新安装应用程序解决了这个问题。


0

我也遇到了同样的问题。只有在第二次调用captureVideo后,才接收到成功捕获的回调。

我刚刚使用新的3.2.0 cordova-dev.jar文件(在eclipse中替换了旧的app/bin/cordova.jar文件),一切恢复正常 :)


0

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接