Apache Cordova 使用照相機 API

2018-08-12 21:29 更新

使用照相機API

在本部分中,你使用Cordova照相機API提供給用戶能夠采集員工照片的能力,并將該圖片用作應用程序中的員工圖片。我們沒有在這個示例應用程序存留這樣的照片。

當在你的設(shè)備上作為一個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()函數(shù)中,為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、測試應用

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號