美轮美奂的phonegap(三)---调用系统相机

最新推荐文章于 2015-11-20 18:35:25 发布

Senssic

最新推荐文章于 2015-11-20 18:35:25 发布

阅读量1k

点赞数

分类专栏： phonegap

本文链接：https://blog.csdn.net/Senssic/article/details/26589547

版权

phonegap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

调用系统摄像头进行拍照。
方法：
camera.getPicture---调用系统照相机拍照
参数：
cameraSuccess---调用成功
cameraError---调用失败
[ cameraOptions ]---设置可选项
对于安卓可选项：
quality(图像的质量) : 75,
destinationType(返回数据的格式) : Camera.Destination(Base64编码) Type.DATA_URL(图像文件路径),一般显示时候用url上传服务器用base
sourceType(图片来源) : Camera.PictureSource(从相册中) Type.CAMERA(即时拍照),
targetWidth(以像素为单位的图像缩放宽度) : 100,

targetHeight(以像素为单位的图像缩放高度) : 100

代码：

<!DOCTYPE html>
<html>
<head>
<title>照相机</title>

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">

	var pictureSource;		    //图片来源
	var destinationType;		//设置返回值的格式
	
	// 等待PhoneGap连接设备
	document.addEventListener("deviceready",onDeviceReady,false);
	
	// PhoneGap准备就绪，可以使用！
	function onDeviceReady() {
		pictureSource=navigator.camera.PictureSourceType;
		destinationType=navigator.camera.DestinationType;
	}
	
	// 当成功获得一张照片的Base64编码数据后被调用
	function onPhotoDataSuccess(imageData) {
		// 控制台打印Base64编码的图像数据
		 console.log(imageData);
		var smallImage = document.getElementById('smallImage');
			 
		// 取消隐藏的图像元素
		
		smallImage.style.display = 'block';
		//用的相机是jpg格式可能不显示,一般传到服务端base64编码
		smallImage.src = "data:image/jpeg;base64," + imageData;
		
	}
	   
   // 当成功得到一张照片的URI后被调用
   function onPhotoURISuccess(imageURI) {
	
		// 控制台打印图片文件的URI
		  console.log(imageURI);
		var largeImage = document.getElementById('largeImage');
		// 取消隐藏的图像元素
		
		largeImage.style.display = 'block';
		largeImage.src = imageURI;
		
	}
	   
   // base64编码数据显示
   function capturePhoto() {

		// 使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像
		navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
   }
   

	   
   //url从相册中选择
   function getPhoto(source) {
   
   		// 从设定的来源处获取图像文件URI
		navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
		destinationType: destinationType.FILE_URI,sourceType: source });
   }

   // 当有错误发生时触发此函数
   function onFail(mesage) {
		alert('Failed because: ' + message);
   }
	
</script>
</head>
<body>
	<button οnclick="capturePhoto();">立即拍照</button> <br>
	<button οnclick="getPhoto(pictureSource.PHOTOLIBRARY);">从相册中选取相片</button><br>
	<img style="display:none;width:300px;height:300px;" id="smallImage" src="" ></img>
	<img style="display:none;" id="largeImage" src="" ></img>
	</body>
</html>

截图：

Senssic

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
美轮美奂的phonegap(三)---调用系统相机

调用系统摄像头进行拍照。方法：camera.getPicture---调用系统照相机拍照参数：cameraSuccess---调用成功cameraError---调用失败[ cameraOptions ]---设置可选项对于安卓可选项： quality(图像的质量) : 75,destinationType(返回数据的格式) : Camera.
复制链接

扫一扫