Question

我有以下HTML：

...

</head>
<body>
    <div class="app">
        <h1>Match It!</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <button id="camera">take a pic</button>
    <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>

...

我在点击标识为camera的按钮时尝试打开相机。

我在index.js中有以下JavaScript：

var app = {

    ...

    cameraUse: function() {
        navigator.camera.getPicture(function(imagePath){
            document.getElementById("photoImg").setAttribute("src", imagePath);
        }, function(){
            alert("Photo cancelled");
        }, {
            destinationType: navigator.camera.DestinationType.FILE_URI
        });
    },

    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        document.getElementById("camera").addEventListener("click", cameraUse, false);
    },

我希望在单击按钮时执行cameraUse功能。

Answer 1

您是否下载过cordova相机plugin，如果没有下载并尝试使用代码

使用
对于cordova版本5.0+

cordova插件添加cordova-plugin-camera

旧版本

cordova插件添加org.apache.cordova.camera

Answer 2

将我的javascript更改为：

onDeviceReady: function() {
    app.receivedEvent('deviceready');
    document.getElementById("camera").addEventListener("click", function() {
        navigator.camera.getPicture(function(imagePath){
            document.getElementById("photoImg").setAttribute("src", imagePath);
        }, function(){
            alert("Photo cancelled");
        }, {
            destinationType: navigator.camera.DestinationType.FILE_URI
        });
    }, false);
}

不同之处在于我将负责打开相机的代码直接移至addEventListener调用，而不是将其置于app变量中的自身功能中

按钮上没有运行功能点击phonegap

2 个答案: