无法阅读财产' getPicture'未定义 - 离子相机

时间:2014-07-26 20:25:17

标签: android angularjs cordova yeoman ionic-framework

此代码返回:

 Cannot read property 'getPicture' of undefined

不知道我做错了什么,你可以帮我解释一下代码吗?

我的应用:

  

angular.module('Todo',['ionic','Todo.controllers','ngStorage',   'Todo.services','ngCordova'])

我的控制器:

.controller('profileEditCtrl', function($scope,Camera, $localStorage,
 $cordovaCamera) 
     {  
        $scope.$storage = $localStorage.$default({ data:[]});

    $scope.takePicture = function() 
    {
        navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
            destinationType: Camera.DestinationType.DATA_URL }); 

      function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src ="data:image/jpeg;base64," + imageData;       
    }

    function onFail(message) {
        alert('Failed because: ' + message);
    }       

}});

2 个答案:

答案 0 :(得分:12)

  • 您的代码是正确的,只需添加一个ng-click="takePicture()"的html按钮。

  • 此处没有问题,确定浏览器 "cannot read property 'getPicture' of undefined",因为它没有配置 对于您定义的移动相机,这意味着您应该测试您的应用程序 一个真实的设备使用:

    > ionic run android

  • 请注意,Google Chrome的新更新有一项新功能 如果设备已连接到浏览器,则可帮助您在浏览器上测试设备 PC /笔记本电脑,用于测试转到chrome的导航面板>>更多工具>>检查设备 或者只是去这个链接:

    <强> 铬://检查/#设备

  • 如果您在应用中安装了插件cordova plugin add org.apache.cordova.camera,我确定您的相机将正常运行。 我希望这可以帮助你。

答案 1 :(得分:0)

在为我的cordova项目尝试了各种运气不好的解决方案之后,我只是继续使用built-in JavaScript APIs。本质上:

async function startCapturing() {   // get ready to shoot
    await getPermission('android.permission.CAMERA');
    let stream = await navigator.mediaDevices.getUserMedia({ video: {width: 480, height: 320, facingMode:'environment' }, audio: false });
    let video = document.getElementById("pVideo");   // a <video> element
    video.srcObject = stream;
    video.play();
    video.style.display = "block";
}

function shootPhoto(){       // take a snapshot
    let video = document.getElementById("pVideo");
    let canvas = document.getElementById("pCanvas");  // a <canvas> element
    let context = canvas.getContext('2d');
    context.drawImage(video,0,0,480,320);
    document.getElementById('fsPhotoI').src = Photo.current.src = canvas.toDataURL('image/png');
    Photo.current.changed = Profile.current.changed = true;
    video.style.display = "none";
}

特别是,某些插件对我不起作用,因为它们无法立即使用Android后置摄像头。 getUserMedia(...)中的以下内容可以解决问题:

facingMode:'environment'

还要确保您在AndroidManifest.xml中具有CAMERA权限。