使用照相機(jī)API

在本部分中，你使用Cordova照相機(jī)API提供給用戶能夠采集員工照片的能力，并將該圖片用作應(yīng)用程序中的員工圖片。我們沒(méi)有在這個(gè)示例應(yīng)用程序存留這樣的照片。

當(dāng)在你的設(shè)備上作為一個(gè)Cordova應(yīng)用程序運(yùn)行該應(yīng)用程序時(shí)，下面的代碼才工作。換句話說(shuō)，你不能在你電腦上的瀏覽器中測(cè)試它。

1、添加照相機(jī)插件到你的項(xiàng)目中：

cordova plugin add org.apache.cordova.camera

2、在index.html中，添加以下列表項(xiàng)到員工模板：

<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列表項(xiàng)的單擊事件注冊(cè)一個(gè)事件偵聽(tīng)器。

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、測(cè)試應(yīng)用