科尔多瓦相机不适用于混合应用程序

时间:2016-08-22 12:37:57

标签: javascript android jquery html cordova

我正在使用HTML5,JavaScript和IDE(eclipse)构建混合Android应用程序。

在我的应用中,我制作了两个html页面。一个是index.html,另一个是camera.html。

[index.html的]

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
		<meta name="format-detection" content="telephone=no">
	    <meta name="msapplication-tap-highlight" content="no">
	    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
	    <script type="text/javascript" src="cordova.js"></script>
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	    <script type="text/javascript" src="js/index.js"></script>
	    <script type="text/javascript" src="js/index2.js"></script>
	</head>
    <body>
        <div data-role="page" id="index" style="width:100%; height:100%">
		    <div data-role="header">
		    	<h1 class="title">Hybird App</h1>
		    </div>
		    <div data-role="content">
		     	<ul data-role="listview" data-inset="true" id="result"></ul>
		        	JSON List
		    </div>
		    <div data-role="footer">
		        <a href="insert.html" data-role="button" >Insert Data</a>
		        <a href="camera.html" data-role="button" >Camera</a>
			</div>
		</div>
    </body>
</html>

[camera.html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<script>
	    var pictureSource;  
		var destinationType;  
		document.addEventListener("deviceready",onDeviceReady,false);
		
		function onDeviceReady() {
		    pictureSource=navigator.camera.PictureSourceType;
		    destinationType=navigator.camera.DestinationType;
		}
		function onPhotoDataSuccess(imageData) {
		  var smallImage = document.getElementById('smallImage');
		  smallImage.style.display = 'block';
		  smallImage.src = "data:image/jpeg;base64," + imageData;
		}
		function onPhotoURISuccess(imageURI) {
		  var largeImage = document.getElementById('largeImage');
		  largeImage.style.display = 'block';
		  largeImage.src = imageURI;
		}
		function capturePhoto() {
		  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
		    correctOrientation : true,
		    destinationType: destinationType.DATA_URL });
		}
		function capturePhotoEdit() {
		   navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, 
		    allowEdit: true,
		    correctOrientation : true,
		    destinationType: destinationType.DATA_URL });
		}
		function getPhoto(source) {
		  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
		    correctOrientation : true, 
		    destinationType: destinationType.FILE_URI,
		    sourceType: source });
		}
		function onFail(message) {
		  alert('Failed because: ' + message);
		}
	</script>	
</head>
 
<body>
	<div data-role="page" id="camera" style="width:100%; height:100%">
	    <div data-role="header">
	    	<h1 class="title">Camera</h1>
	    </div>
	    <div data-role="content">		
		    <img style="display:none; wdith:100%; height:100%" id="largeImage" src=""/>
		</div>
	    <div data-role="footer">	        
	    	 <a href="index.html" data-role="button" >Main</a>
	        <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="" />
		</div>
	</div>
</body>
</html>

[index.js]

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // 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');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

[index2.js]

$(document).ready(function(){	
	var url="http://192.168.0.26/android/json.php";
	$.getJSON(url,function(result){
		$.each(result, function(i, field){
			var id=field.id;
			var title=field.title;
			var duration=field.duration;
			var price=field.price;
			$("#result").append("<li><a class='item' href='form.html?id="+id+"&title="+title+"&duration="+duration+"&price="+price+"'>" +
					"<span class='item-note'>$"+price+"</span><h2>"+ title + " </h2><p>"+ duration +"</p></a></li>");
			 $("#result").listview("refresh");  
		});		
	});
});

[MainActivity.java]

/*
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
 */

package app.su.project;

import android.os.Bundle;
import org.apache.cordova.*;

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }
}

我添加的index2.js通常在主页面(index.html)中运行,并通过按钮移动到camera.html页面,问题是没有尝试使用Camera功能。

所有JavaScript来源都无法在camera.html中使用。

我猜是Cordova-Whitelist是个问题。还是有其他问题吗?

混合应用程序开发不是第一次使用。希望得到很多帮助。

+

enter image description here

当我触摸我的应用程序中的“捕捉照片”按钮时,此图像是错误日志。

0 个答案:

没有答案