PhoneGap API應用：Camera相機(一) - 用相機拍照後用img顯示出來

最近因為比較忙一些專案，所以比較沒空寫blog文章

因為之前寫Native App(原生應用程式)比較多，Mobile App的部份相對的就比較少

所以今後會先寫一幾篇Mobile App，Android的開發是很廣泛的，不限定一定要用

怎樣的方式開發，像電子報來說，你可以用Native的方式開發，也能用PhoneGap

的Mobile app方式開發，這都是可行的，所以開發是沒有一定的形式，在於使用

者和設計者的喜好和習慣，這兩種開發方式都有其優缺點，優缺點我在這裡有介紹

過了，各位可以參考，好!以上是我的完全和本文無關的碎碎唸，系列文章第一篇的

廢話都是比較多的請見諒，接下來進入主題。

我會針對PhoneGap API的各大項API做各別應用上的大略介紹，實際在開發上各位還

是要針對需求做自我轉變，我不可能都猜到各位實際開發上會怎麼使用它，如果都猜

得到，我就改行當算命的了XD(誤)。

如果建立、安裝及設定Phonegap因為之前我就有介紹過了PhoneGap安裝，所以之後系列

應用上就都直接貼上程式碼，不再重覆介紹了，請見諒!，直接PO上JavaScript程式碼再來說明。


JavaScript程式碼

<script type="text/javascript" charset="utf-8">
       
       //功用和onload相同
       document.addEventListener("deviceready", onDeviceReady, false);
    
    function onDeviceReady() {
        // Empty
    }
 //一個按鈕將調用這個函數
    function capturePhoto() {
       // 取得圖像(成功事件 ,失敗事件,{圖片設定});
      // getpicture(cameraSuccess,cameraError,{cameraOptions});
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
    }
    //照片是成功檢索時調用
    function onPhotoDataSuccess(imageData) {
      //取消註釋，以查看base64編碼的圖像數據
      // console.log(imageData);

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

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

      //顯示拍攝的照片
      //內聯 CSS規則是用來調整圖像的大小
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

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

html元件

<button onclick="capturePhoto();">Capture Photo</button>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

實作出來的畫面：

跳出來的選取相機和Native中的使用其他服務幫忙拍照類似

拍照後，圖片就直接出現在img內

說明：

看得懂JavaScript的應該自己看程式碼就知道了，全部的重點就是
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });

再來就是顯示圖片 smallImage.src = "data:image/jpeg;base64," + imageData;

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