phonegap-调用android手机照相机

原创 2015年11月20日 18:35:25


环境配置参见: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 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="" />    
    <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.界面图







版权声明:本文为博主原创文章,未经博主允许不得转载。

phonegap照相插件的使用

phonegap的API提供照相功能,使用很方便. 此篇文章以cordova 3.3版本编写   据我总结核心步骤:  创建工程 ; 下载插件 ;编译工程; 调用插件;               按...
  • aaawqqq
  • aaawqqq
  • 2014年02月28日 15:11
  • 19621

cordova调用相机

该篇主要讲述cordova如何调用相机。Cordova框架提供了两个用于访问设备相机的API,一个是Camera API,它使用开发者能直接访问本地相机的API,另一个是Media Capture A...
  • genius_yym
  • genius_yym
  • 2017年07月20日 10:01
  • 1078

cordova media-capture插件

介绍 这个插件提供了访问设备的图像、音频录制和视频录制能力。           安装 cordova plugin add cordova-plugin-media-capture ...
  • michael_ouyang
  • michael_ouyang
  • 2017年07月24日 12:59
  • 434

Cordova使用插件cordova-plugin-media-capture调用摄像头

cordova-plugin-media-capturedemo 录像
  • guo1413
  • guo1413
  • 2017年10月19日 00:23
  • 115

Android应用开发之使用PhoneGap(cordova)实现拍照上传功能

在之前的使用Intellij Idea 搭建PhoneGap Android开发环境以及Android应用开发之使用PhoneGap实现位置上报功能两篇文章中,我们学习了phonegap Andr...
  • wangliqiang1014
  • wangliqiang1014
  • 2015年06月16日 17:36
  • 7563

Vue.js 使用cordova camera插件调取相机

介绍完上文 用Cordova打包Vue项目之后,本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作。 具体的操作步骤如下 第一步:在cordova项目下安装...
  • Iohboel
  • Iohboel
  • 2017年08月23日 08:59
  • 4001

【整理】Cordova 从相册中选择照片/拍照并上传

一、安装需要的插件         不管是从相册中选择图片上传,还是拍照上传。我们都需要如下先安装如下三个插件:Camera(相机)、file(文件访问操作)、fileTransfer(文件传输)。...
  • weixin_37640957
  • weixin_37640957
  • 2017年08月15日 23:03
  • 1442

phonegap插件的实现

需求:通过手机web端,点击指定按钮能够调用Android手机内部的某个应用程序,以QQ为例。 分析:phonegap可以实现用web API调用手机的本地功能,如二维码扫描,拍照等。官网已有一些现...
  • happyflyingave
  • happyflyingave
  • 2014年05月07日 10:26
  • 3097

phonegap入门--4 Camera 摄像头

今天周六了,每次到了周六就不知道干嘛去,好没劲啊.有在北京的如果周六也没劲的,可以联系我大家一起出去玩,qq598660766. 没事干,那就写写博客吧,今天介绍一下Camera这个对象.camer...
  • mengxiangyue
  • mengxiangyue
  • 2013年04月13日 11:01
  • 27673

phonegap调用Camera 摄像头

1、创建Android APP 2、在xml/config.xml中添加功能 ...
  • wuyou1336
  • wuyou1336
  • 2017年01月07日 14:58
  • 320
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:phonegap-调用android手机照相机
举报原因:
原因补充:

(最多只允许输入30个字)