DevExtreme / Phonegap相机插件:“无法读取未定义的propetry'getPicture'”

时间:2017-09-12 14:26:41

标签: javascript cordova camera phonegap devextreme

我的应用程序让我发疯了。

我正在使用基于phonegap的DevExtreme。

我想在我的应用程序中使用相机拍照,但我遇到了一些麻烦。

首先,这是我的config.xml。

<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
  <name>ApplicationTemplate</name>
  <description>Template</description>
  <preference name="permissions" value="none" />
  <preference name="prerendered-icon" value="true" />
  <preference name="android-windowSoftInputMode" value="adjustPan" />
  <preference name="SplashScreenDelay" value="60000" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false" />
  <preference name="ShowSplashScreenSpinner" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="StatusBarOverlaysWebView" value="false" />
  <preference name="StatusBarBackgroundColor" value="#000000" />
  <preference name="android-minSdkVersion" value="14" />
  <preference name="android-targetSdkVersion" value="22" />
  <plugin name="cordova-plugin-camera" spec="^2.4.1" source="npm" />
  <plugin name="cordova-plugin-splashscreen" onload="true" />
  <plugin name="cordova-plugin-whitelist" />
  <plugin name="cordova-plugin-ios-longpress-fix" />
  <plugin name="cordova-plugin-statusbar" onload="true" />
  <access origin="*" />
</widget>

你觉得这里有什么问题吗?

此外,我有一个按钮来调用相机功能(从教程中复制):

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
    try
    {
        // 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;
    }
    catch (err) {
        alert(err.message);
    }
}

// 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 capturePhotoWithData() {
    try {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
    }
    catch (err) {
        alert(err.message);
    }
}
function capturePhotoWithFile() {
    navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
}

// A button will call this function
//
function getPhoto(source) {
    debugger;
    // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality: 50,
        destinationType: OverviewAPP.destinationType.FILE_URI,
        sourceType: source
    });
}
// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed because: ' + message);
}

这是我的相关HTML:

[...]
<div class="myBtnPhoto" data-bind="dxButton: { text: 'Conferma con foto', onClick: capturePhotoWithData}" style="float:right;"></div>
[...]
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
[...]

函数capturePhotoWithData被正确调用,但该函数进入catch分支并且警报显示“无法读取未定义的'propetry'getPicture'”

我创建模板,然后构建解决方案。我在我的Android设备上试试这个。我在网上看了很多论坛和其他问题,但没有什么对我有用。

你看到这里有什么错误或遗漏吗?

1 个答案:

答案 0 :(得分:0)

这意味着navigator.camera未定义,因此您的项目未看到cordova-plugin-camera

最常见的问题可能是:在设备准备好之前调用它。 请务必将相机调入deviceready

document.addEventListener("deviceready", function(){
  console.log(navigator); // here you can check all plugins
}

您可以运行:$ cordova plugin list以确保此插件也存在于列表中。

还尝试重建:$ cordova build android(或ios)