在本部分中,你使用Cordova照相机API提供给用户能够采集员工照片的能力,并将该图片用作应用程序中的员工图片。我们没有在这个示例应用程序存留这样的照片。
当在你的设备上作为一个Cordova应用程序运行该应用程序时,下面的代码才工作。换句话说,你不能在你电脑上的浏览器中测试它。
1、添加照相机插件到你的项目中:
cordova plugin add org.apache.cordova.camera
2、在index.html中,添加以下列表项到员工模板:
<li class="table-view-cell media">
<a hre="#" class="push-right change-pic-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Change Picture
</div>
</a>
</li>
3、在EmployeeView的initialize()函数中,为Change Picture列表项的单击事件注册一个事件侦听器。
this.$el.on('click', '.change-pic-btn', this.changePicture);
4、在EmployeeView中,定义changePicture事件处理程序如下:
this.changePicture = function(event) {
event.preventDefault();
if (!navigator.camera) {
alert("Camera API not supported", "Error");
return;
}
var options = { quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Album
encodingType: 0 // 0=JPG 1=PNG
};
navigator.camera.getPicture(
function(imgData) {
$('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
},
function() {
alert('Error taking picture', 'Error');
},
options);
return false;
};
5、测试应用