[Windows Phone 7] PhoneGap 啟動照相
2012-10-05
前幾天 寫過一篇文章 簡單介紹一下，如何使用 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://kuro.tw/blog/2012/02/28/phonegap-api-reference-camera
官方文件: http://docs.phonegap.com/en/2.0.0/cordova_camera_camera.md.html#Camera
範例: