當麻許的超技八: [Windows Phone 7] PhoneGap 啟動照相

前幾天寫過一篇文章簡單介紹一下，如何使用 PhotoCamera 進行拍照..

這幾天在評估PhoneGap，當然也測試了這案例…

這篇來簡單介紹一下，如何使用PhoneGap啟動相機拍照…

如果不知道如何使用PhoneGap建立專案，可以參考這篇

首先在www/index.html 中 <body> 中加入一個 input button 和 img

按下input 時啟動相機，拍完之後將結果放入img 中..

HTML Code :

<body>
    <h1>Hello Cordova</h1>
    <div id="welcomeMsg"></div>
    <input type="button" value="啟動相機" onclick="onBtnCamera_Click()" id="btnCamera" />
    <img id="myImage" style="width:200px;height:200px" />
    
  </body>

接下來就是JavaScript 的部分..

//透過PhoneGap啟動相機
   function onBtnCamera_Click()
   {
     navigator.camera.getPicture(onCameraTakeSuccess, onCameraTakeFail, { quality: 100,destinationType: Camera.DestinationType.DATA_URL});
   }

   
  //成功後事件
   function onCameraTakeSuccess(imageData) {
   var image = document.getElementById('myImage');
   image.src = "data:image/jpeg;base64," + imageData;
   }


   //失敗後事件
   function onCameraTakeFail(message) {
   alert('Failed because: ' + message);
   }

結果:

請注意，如果你佈署到手機上面，如果線還插著，拍照結果會出不來…

去官網上面看仔細看到這一段…

所以必須要把線拔掉再進行測試..

在看資料的時候發現這Blog把這功能寫得非常詳細..

官方文件: http://docs.phonegap.com/en/2.0.0/cordova_camera_camera.md.html#Camera

範例:

2012-10-05

[Windows Phone 7] PhoneGap 啟動照相