天天看点

一个Cordova 调用相机和本地相册的实例分享

使用Cordova调用原生相机有以下几个步骤:

1.下载相关的插件cordova-plugin-camera,在命令行,切换至项目根目录下后,输入以下命令:

cordova plugin add cordova-plugin-camera
           

2.我们会看到在项目assets/www/plugin文件夹下多了一个插件cordova-plugin-camera

3.开发index.html,这里需要引入cordova.js和html实现逻辑的cameraindex.is文件,不需要引入插件中的js,你会发现,在运行的时候,插件中的js已经自动引入了,其实这些工作都由cordova.js帮我们做啦~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="content-type" content="text/html">
		<meta name="viewport" id="viewport" content="width=device-width,height=device-height,
                   initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<title>调试调用本地相机功能</title>
		<link href="css/cameraindex.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css"/> 
		
	</head>
	<body onload="onBodyLoad()">
		<div class="container">
			<div class="showpic">
				<img id="showimg" class="showimg" src="img/logo.png" />
			</div>
            <div class="choosediv">
            	<button class="takepicture" onclick="takePhoto()">拍照</button>
			    <button class="takepicture" onclick="takefromgalery()">相册</button>
            </div>
           
		</div>
		<script src="cordova.js"></script>
		<script src="js/cameraindex.js"></script> 
	</body>
</html>
           

2.开发cameraindex.css文件

body{
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: #FFCCCC;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:14px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.choosediv{
	width:100%;
	height:100px;
	position: fixed;
	text-align: center;
	bottom: 10%;
}
.showimg{
	margin-top: 20%;
	max-width: 300px;
	max-width: 300px;
	width:200px;
	height:200px;
	
}
.takepicture{
	width:100px;
	height:100px;
	text-align: center;
	color: #ffffff;
	font-family: "微软雅黑";
	font-size: 16px;
	background-color: #FF9999;
    margin-left: 20px;
    outline:none;
    outline-color: rgba(255,255,255,0);
	border-radius: 50% 50%;
	border:0px;
}
.showpic{
	width:80%;
	height:50%;
	background-color: rgba(255,255,255,0.6);
	position:fixed;
	top:10%;
	left:10%;
	text-align: center;
}
           

3.实现cameraindex.js,这里返回的是经过base64编码的内容,如果你想返回图片地址的话,可以修改这个参数,

 destinationType : Camera.DestinationType.DATA_URL  ---返回base64编码的内容

 destinationType : Camera.DestinationType.FILE_URI ---返回图片存储地址,IOS返回的地址

其他参数说明:

   quality : 75      --图片质量,或者可以说图片的压缩比例,压缩后的图片可以减少存储空间和传输带宽,设置范围为0-100

   destinationType :    --目标类型,用来控制图片是以base64还是url的方式返回。

  sourceType : 定义函数如何获取图片。取值有以下几种: Camera.PictureSourceType.CAMERA 使用摄像头来获 取; Camera.PictureSourceType.PHOTOLIBRARY  使用设备图库; Camera.PictureSourceType.SAVEDPHOTOALBUM 从已存相册中获取图片。

    allowEdit : true,  --是否允许编辑,如果设置为true,用户可对图片进行缩小放大及滑动等操作来编辑图片。

    encodingType : Camera.EncodingType.JPEG   --告诉函数返回何种图片类型,支持的选项有JPEG和PNG.

    targetWdith : 100,     --目标高度,决定函数将返回多大尺寸的图片,你可以设置targetWidth或者targetHeight中的任何一个,图片会据此进行缩放。如果你两个值都指定了,图片的缩放比例会根据最小的那个值进行缩放。无论哪种方式,长宽比都不会发生改变。

    targetHeight : 100,   --目标宽度

    popoverOptions : CameraPopoverOptions,  设置项调用相机自带的设置项

    saveToPhotoAlbum : false   -是否保存到本地相册中

function onBodyLoad(){
	document.addEventListener("deviceready",onDeviceReady);
}
function onDeviceReady(){
	console.log("onDeviceReady");
}
function takePhoto(){
	var cameraOptions= {
    quality : 75,
    destinationType : Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,     //照相机类型
    allowEdit : true,
    encodingType : Camera.EncodingType.JPEG,
    targetWdith : 100,
    targetHeight : 100,
    popoverOptions : CameraPopoverOptions,
    saveToPhotoAlbum : false
};
   console.log("调用拍照接口");
	navigator.camera.getPicture(onCameraSuccess,onCameraError,cameraOptions);
}

function takefromgalery(){
	var cameraOptions= {
    quality : 75,
    destinationType : Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,    //相册类型
    allowEdit : true,
    encodingType : Camera.EncodingType.JPEG,
    targetWdith : 100,
    targetHeight : 100,
    popoverOptions : CameraPopoverOptions,
    saveToPhotoAlbum : false
};
   console.log("调用相册接口");
	navigator.camera.getPicture(onCameraSuccess,onCameraError,cameraOptions);
}

function onCameraSuccess(imageURL){
	console.log("onCameraSuccess:"+imageURL);
	var image = document.getElementById('showimg');
    image.src = "data:image/jpeg;base64," + imageURL;
}

function onCameraError(e){
	console.log("onCameraError:"+e);
}
           

5.在AndroidManifest.xml中添加权限,这步不要忘记了哦~

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

6.运行app,如果点击按钮没有调用的话,可以看一下是否本地权限没有打开,如果是开启的,就可以正常调用啦~

~bingo~搞定

继续阅读