手把手教你玩转cordova（PhoneGap）
相机
前言
这一章我们将学习如何使用
cordova调用手机的照相机功能。用户可以使用我们的App拍照、并将照片展示出来，还可以从相册中选择照片。
一、实现拍照功能
打开PhoneGap PC端，创建一个名为“Camera”的项目。
修改文件 www -> index.html，使其最终成为以下这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<title>Camera</title>
<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;overflow:hidden;}
#divCtrl{height:30px;text-align:center;}
#divPhoto{position:absolute;top:35px;bottom:0px;left:0px;right:0px;background-size:cover;background-color:#444;}
</style>
</head>
<body>
<div id="divCtrl">
<button id="btn0">拍照</button>
</div>
<div id="divPhoto"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
打开文件 www -> js -> index.js，PhoneGap已经为我们自动生成了一些代码，定义了一个名为“app”的object变量，其中的“receivedEvent”属性我们并不需要，删掉它。
在 index.html 中自动生成的js代码调用了 app.initialize();，也就是 index.js 中的app变量的 initialize，在 initialize 方法中又调用了 bindEvents，在 bindEvents 中为 document 绑定了一个事件“deviceready”，即当设备准备好之后触发的事件。在这里，当设备准备好之后会执行 onDeviceReady 方法。我们自己的代码需要写在 onDeviceReady 方法里面。
修改 onDeviceReady 方法，使其成为这样：
onDeviceReady: function () {
document.getElementById('btn0').addEventListener('click', function () {
// 调用照相机
navigator.camera.getPicture(function (img) {
// 拍照成功后执行此方法，将所拍的照片的地址设为 divPhoto 的背景。
// img可能是照片的base64格式，也可能是照片的文件地址，具体是什么取决于 destinationType 的值
document.getElementById('divPhoto').style.backgroundImage = 'url(' + img + ')';
}, function (err) {
// 拍照失败后执行此方法
alert('发生错误了。' + err);
}, {
quality: 50, // 设置照片的质量，取值花园为 0 -- 100，值越大表示照片质量越高。某些版本的 BlackBerry、Palm 不支持此参数，在iPhone设备上此值不要大于50（有可能会发生内存错误）
destinationType: 1 // 设置拍照成功后返回的数据的类型。如果为0（默认值），则返回的是照片的base64格式，如果是1，则返回的是照片的文件地址
});
}, false);
}
然后，在手机端运行PhoneGap测试。
二、从相册中选择照片并展示
现在，我们来给我们这个简单的App新增一个功能：从相册中选择照片并展示出来。
首先需要修改 index.html ，在顶部加入一个“选择”按钮，点击它后，弹出一个选择照片的对话框，选择好后，将用户选择的照片显示在“divPhoto”中。修改后的 index.html 是这样子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<title>Camera</title>
<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;overflow:hidden;}
#divCtrl{height:30px;text-align:center;}
#divPhoto{position:absolute;top:35px;bottom:0px;left:0px;right:0px;background-size:cover;background-color:#444;}
</style>
</head>
<body>
<div id="divCtrl">
<button id="btn0">拍照</button>
<button id="btn1">选择</button>
</div>
<div id="divPhoto"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
在 index.js 的 onDeviceReady 方法中加入以下代码：
document.getElementById('btn0').addEventListener('click', function () {
// 从设备中获取图片
navigator.camera.getPicture(function (img) {
// 选择照片成功后执行此方法。
// 由于 getPicture 的第三个参数中 destinationType 的值为 0，因此这里返回的 img 是所选择照片的base64格式。
document.getElementById('divPhoto').style.backgroundImage = 'url(data:image/jpeg;base64,' + img + ')';
}, function (err) {
// 选择照片失败（包括取消选择）后执行此方法
alert('发生错误了。' + err);
}, {
quality: 50,
destinationType: 0,
sourceType: 0 // 如果此值设为0或2，表示从照片库或文件系统中选择图片，如果是1（默认），表示从相机中选择照片
});
}, false);
我们可以发现，此段代码与前面所写的“拍照”的代码基本一样。是的，“拍照”和“选择照片”都是使用 navigator.camera.getPicture() 方法，不同的是第三个参数中的 sourceType。如果此值设为0或2，表示需要从照片库或文件系统中获取照片，如果设为1（默认值），表示需要从相机中获取照片，也就是需要使用相机拍照。在目前的Android版本中，设为0和2没什么区别。有些版本的 BlackBerry、Palm 不支持此参数。
更多....
navigator.camera.getPicture() 方法的第三个参数还可传更多的参数，分别为：
saveToPhotoAlbum：是否将照片保存到照片集。是一个boolean值。
allowEdit：是否允许对照片进行编辑。是一个boolean值。
有些版本的 Android、WinPhone、BlackBerry、Palm 不支持此参数。
encodingType：照片的编码类型。0表示JPEG，1表示PNG。
targetWidth：一个数字。选择的照片的宽度会被转为此值，单位是 px。必须与 targetHeight 同时使用，宽高比保持不变。
targetHeight：一个数字。选择的照片的高度会被转为此值，单位是 px。必须与 targetWidth 同时使用，宽高比保持不变。
mediaType：媒体类型。只有当 sourceType 的值为 0 或 2 时才有效。0表示照片，1表示视频（居然还可以选择视频？快试试看吧），2表示所有支持的类型。
有些版本的 BlackBerry、Palm 不支持此参数。
参考文档：http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html
最后，来个广告
若你觉得此文不错，请分享，若认为尚需改进，请点讚。
结束语