PhoneGap API應用：Camera相機(二) - 選取手機內照片用img顯示出來

即上篇-用相機拍照後，這篇就不得不說說怎麼從手機內取出照片了

鬼月廢話還是不要太多，不然別人會覺得我是在"鬼話連篇"，直接PO上程式碼


JavaScript程式碼

<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
       
      var pictureSource;   //圖片的來源
    var destinationType;  //返回值的格式設置

    // Wait for PhoneGap to connect with the device
    document.addEventListener("deviceready",onDeviceReady,false);

    // PhoneGap 剛onload時
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }
//一個按鈕將調用這個函數
//Android的怪癖：pictureSource.PHOTOLIBRARY和pictureSource.SAVEDPHOTOALBUM是相同的
//所以點選getPhoto(pictureSource.PHOTOLIBRARY)
//或是getPhoto(pictureSource.SAVEDPHOTOALBUM)功能是相同的
    function getPhoto(source) {
      // 取得圖像(成功事件 ,失敗事件,{圖片設定});
      // getpicture(cameraSuccess,cameraError,{cameraOptions});
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }
//照片是成功檢索時調用
    function onPhotoURISuccess(imageURI) {
      //取消註釋，以查看base64編碼的圖像數據
      // console.log(imageURI);

      //獲取的圖像處理
      var largeImage = document.getElementById('largeImage');

      //取消隱藏的圖像元素
      largeImage.style.display = 'block';

      //顯示取得的照片
      // The inline CSS rules are used to resize the image
      largeImage.src = imageURI;
    }

    //錯誤發生時 
    function onFail(message) {
      alert('Failed because: ' + message);
    }

      </script>

html元件

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">從相片的檔案庫</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">從相片簿</button><br>
<img style="display:none;width:60px;height:60px;" id="largeImage" src="" />

實作出來的畫面：

說明：

雖然有兩個功能按鈕可以作出這個功能，而且帶入的參數不同

但其實做出來的功能是一樣的，原因是Android的怪癖

Camera.PictureSourceType.PHOTOLIBRARY和PictureSourceType.SAVEDPHOTOALBUM

會被視為相同，都會都出現相同的相冊，官網說明文件中有提到

以上是為您做的簡單介紹，謝謝。