phonegap-調用android手機照相機


環境配置參見:http://blog.csdn.net/adrian_rendong/article/details/49910335 點擊打開鏈接

附完整android工程包http://download.csdn.net/detail/adrian_rendong/9287027

使用Node.js創建工程


打開Node.js控制檯並進入到準備存放工程文件的文件夾下

1.創建一個phonegap工程

phonegap create adrian

2.進入項目文件中的plugins文件夾下

cd adrian 
cd plugins

3.下載插件

cordova plugin add org.apache.cordova.dialogs  
cordova plugin add org.apache.cordova.vibration 
cordova plugin add org.apache.cordova.camera

4.添加android平臺

cordova platform add android

5.編譯android工程

cordova build


注意:提示錯誤(如果未提示錯誤不必進行下一步)
繼續輸入
phonegap run android


現在android的工程就創建好了

導入工程

參見http://blog.csdn.net/adrian_rendong/article/details/49910335

編寫調用照相機程序

1.編輯index.html

打開index.html
將裏面的代碼全部刪除,粘貼如下代碼
<!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;    
    var destinationType;         
    document.addEventListener("deviceready",onDeviceReady,false);         
        function onDeviceReady() {      //加載後執行  
        	pictureSource=navigator.camera.PictureSourceType;        
        	destinationType=navigator.camera.DestinationType;    
        }     
        function onPhotoDataSuccess(imageData) {          
	        console.log(imageData);           
	        var smallImage = document.getElementById('smallImage');          
	        smallImage.style.display = 'block';        
	        smallImage.src = "data:image/jpeg;base64," + imageData;    
	    }      
        function onPhotoURISuccess(imageURI) {        
	        console.log(imageURI);        
	        var largeImage = document.getElementById('largeImage');        
	        largeImage.style.display = 'block';        
	        largeImage.src = imageURI;    
	    }      
        function capturePhoto() {        
	        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
	        	quality: 50,        
	        	destinationType: destinationType.DATA_URL });    
	    }      
        function capturePhotoEdit() {        
	        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 
	        	quality: 20, allowEdit: true,        
	        	destinationType: destinationType.DATA_URL });    
	    }      
        function getPhoto(source) {        
	        navigator.camera.getPicture(onPhotoURISuccess, onFail, { 
	        	quality: 50,        
	        	destinationType: destinationType.FILE_URI,        
	        	sourceType: source });    
	    }      
        function onFail(message) {      
        	alert('Failed because: ' + message);    
        }     
    </script>  
</head>   
<body>    
    <button οnclick="capturePhoto();">Capture Photo</button> <br>  
    <button οnclick="capturePhotoEdit();">Capture Editable Photo</button> <br>    
    <button οnclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>    
    <button οnclick="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>

2.在config.xml中添加功能

打開config.xml
<widget>中添加如下代碼
<feature name="Notification">      
<param name="android-package" value="org.apache.cordova.dialogs.Notification" />  
</feature>  
<feature name="Vibration">      
<param name="android-package" value="org.apache.cordova.vibration.Vibration" />  
</feature>

截圖如下

3.爲android應用增加權限

打開AndroidManifest.xml
<manifest>下添加如下代碼
<uses-permission android:name="android.permission.VIBRATE" /> 


截圖如下



4.打包成android安裝文件



5.界面圖







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章