使用照相机API

在本部分中,你使用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、测试应用
联系我们

邮箱 626512443@qq.com
电话 18611320371(微信)
QQ群 235681453

Copyright © 2015-2024

备案号:京ICP备15003423号-3