Apache Cordova 使用照相机 API

2018-08-12 21:29 更新

使用照相机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、测试应用

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号