phoneGap3.4 添加拍照插间

最新推荐文章于 2019-05-07 18:50:51 发布

love13135816

最新推荐文章于 2019-05-07 18:50:51 发布

阅读量827

点赞数

分类专栏： phoneGap

本文链接：https://blog.csdn.net/love13135816/article/details/21157993

版权

phoneGap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

cmd进入phoneGap创建的工程目录
进入plugins文件夹cd plugins
开始下载插件cordova plugin add org.apache.cordova.camera
等待安装结束

调用相机的例子

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport"
	content="width=device-width, minimum-scale=1, maximum-scale=1">
<script type="text/javascript" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
	var pictureSource; //设定图片来源  
	var destinationType; //选择返回数据的格式  

	document.addEventListener("deviceready", onDeviceReady, false);

	// Cordova准备好了可以使用了  
	function onDeviceReady() {
		pictureSource = navigator.camera.PictureSourceType;
		destinationType = navigator.camera.DestinationType;
	}

	function onPhotoDataSuccess(imageData) {
		// base64 encoded image data  
		var smallImage = document.getElementById('smallImage');

		smallImage.style.display = 'block';
		//在使用base64编码的时候需要使用这样的前缀  
		smallImage.src = "data:image/jpeg;base64," + imageData;
	}

	// Called when a photo is successfully retrieved  
	//  
	function onPhotoURISuccess(imageURI) {
		// image file URI   
		var largeImage = document.getElementById('largeImage');
		largeImage.style.display = 'block';
		//使用image file URI 直接赋值就可以了  
		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) {
		// Retrieve image file location from specified 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>