カメラでの撮影機能を追加
最後に、カメラで写真を撮影し、撮影した写真にすぐに取り込んでお絵かきできるようにしましょう。カメラ撮影とフォトアルバムの選択は同じnavigator.camera.getPictureメソッドですので、オプションの指定だけでどちらを使うかを選択できます。
sourceTypeに指定できるオプションは以下の表のようになります。
カメラ撮影 | navigator.camera.PictureSourceType.CAMERA |
フォトライブラリ選択 | navigator.camera.PictureSourceType.PHOTOLIBRARY |
カメラ撮影の時には、カメラで撮影した画像のJPEG画質を指定します。画質はqualityオプションで指定できますが、画質をかなり落とさないと処理に時間がかかります。テスト時に実機での動作が停止してしまったら、iPhoneを再起動して画質を調整し、再度動作をチェックしましょう。
実際のプログラムは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
body { margin:0; padding: 0; background-color:black; }
canvas { background-color: white; }
</style>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
<script type="text/javascript">
function cameraCapture(srcType) {
navigator.camera.getPicture( cameraSuccess, cameraError, {
sourceType: srcType,
quality: 30
});
}
// データの取得に成功した場合
function cameraSuccess(imageData) {
var image = new Image();
image.src = "data:image/jpeg;base64," + imageData;
image.onload = function(){
var canvasObj = document.getElementById("myCanvas");
var context = canvasObj.getContext("2d");
context.drawImage(this, 0, 0, 320, 320);
}
}
// データの取得に失敗した場合
function cameraError(message) {
document.getElementById("stat").innerHTML = "エラー:"+message;
}
</script>
</head>
<body>
<canvas id="myCanvas" width="320" height="320"></canvas>
<button onclick="cameraCapture(navigator.camera.PictureSourceType.PHOTOLIBRARY)">
フォトライブラリを選択</button>
<button onclick="cameraCapture(navigator.camera.PictureSourceType.CAMERA)">
カメラで撮影</button>
<div id="stat"></div>
<script type="text/javascript" charset="utf-8" src="js/draw.js"></script>
</body>
</html>
実機で動作確認
実機に転送して動作を確認してみましょう。以下の写真のようになります。
PhoneGapを使えばWebアプリの機能に加えて、モバイル端末ならではの機能も活用できます。また、プラグインを利用することで、作成できるアプリの幅も広がります。これまでの連載も参考に、ぜひPhoneGapによるアプリ開発を試してみてください。