phonegap调用Camera 摄像头

最新推荐文章于 2017-09-21 13:57:15 发布

小向光

最新推荐文章于 2017-09-21 13:57:15 发布

阅读量1.1k

点赞数

分类专栏： phonegap

本文链接：https://blog.csdn.net/wuyou1336/article/details/54173437

版权

phonegap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、创建Android APP

2、在xml/config.xml中添加功能

<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>  
<feature name="Camera" >
        <param
            name="android-package"
            value="org.apache.cordova.CameraLauncher" />
    </feature>
<feature name="App" >
        <param
            name="android-package"
            value="org.apache.cordova.App" />
</feature>

3、在AndroidManifest.xml添加权限

<uses-permission android:name="android.permission.VIBRATE" />

4、创建index.html

在assets目录下创建 www/index.html

<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta charset="UTF-8">
<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;
	}
	//当成功获取图片时以base64编码格式显示
	function onPhotoDataSuccess(imageData) {
		console.log(imageData);
		var smallImage = document.getElementById('smallImage');
		smallImage.style.display = 'block';
		smallImage.src = "data:image/jpeg;base64," + imageData;
	}
	//当成功获取图片时以uri格式显示
	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) {
		// "content://com.android.providers.media.documents/document/image%3A418", source: file:///android_asset/www/camera.html (21)

		navigator.camera.getPicture(onPhotoURISuccess, onFail, {
			quality : 50,
			destinationType : destinationType.FILE_URI,
			sourceType : source
		});
	}
	function onFail(message) {
		alert('Failed because: ' + message);
	}
</script>
</head>
<body>
	<p>
		<button οnclick="capturePhoto();">拍照</button>
	</p>
	<p>
		<button οnclick="capturePhotoEdit();">编辑图片</button>
	</p>
	<p>
		<button οnclick="getPhoto(pictureSource.PHOTOLIBRARY);">选择图片库中的图片</button>
	</p>
	<p>
		<button οnclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">选择相册中的图片</button>
	</p>

	<img style="display: none; width: 200px; height: 200px;"
		id="smallImage" src="" />
	<img style="display: none; width: 300px; height: 300px;"
		id="largeImage" src="" />
</body>
</html>

5、运行APP，最后的效果如下;

Camera方法详解：

camera的方法：

 navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。

camera.getPicture函数打开设备的默认摄像头应用程序，使用户可以拍照（如果 Camera.sourceType 设置为 Camera.PictureSourceType.CAMERA，这也是默认值）。一旦拍照结束，摄像头应用程序会关闭并恢复用户应用程序。
如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系统弹出照片选择对话框，用户可以从相集中选择照片。
返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数：
一个字符串，包含Base64编码的照片图像（默认情况）。
一个字符串，表示在本地存储的图像文件位置。

cameraOptions 参数详解：

quality：存储图像的质量，范围是[0,100]。(数字类型)
destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。可选择的值：destinationType.DATA_URL、destinationType.FILE_URI(数字类型)
sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。可选择的值：Camera.PictureSourceType.CAMERA、Camera.PictureSourceType.PHOTOLIBRARY、Camera.PictureSourceType.SAVEDPHOTOALBUM(数字类型)
allowEdit：在选择图片进行操作之前允许对其进行简单编辑。(布尔类型)
encodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。(数字类型)
targetWidth：以像素为单位的图像缩放宽度，必须和targetHeight同时使用。相应的宽高比保持不变。(数字类型)
targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。(数字类型)

这些属性并不是在所有的设备上都起作用,具体的每个设备的支持情况还请参照官方文档.

小向光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
phonegap调用Camera 摄像头

1、创建Android APP2、在xml/config.xml中添加功能 <param name="android-package" value="org.apache.cordova.CameraLauncher" />
复制链接

扫一扫

专栏目录