Apache Cordova 使用照相機 API

使用照相機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、測試應用