使用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" 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~搞定