カメラで撮影した画像をページ内に表示する

説明

iPhoneのカメラを起動して、そこで撮影された画像を取り込むにはnavigator.camera.getPicture()を使います。getPicture()の最初のパラメータに成功時のコールバック関数を、2番目のパラメータにはエラー発生時に呼び出すコールバック関数を、3番目のパラメータにはオブジェクト形式で各種オプションを指定します。カメラで撮影した画像の画質はオプションのqualityで指定できます。値が大きいほど高画質になります。ただし、その場合データサイズが非常に大きくなるため処理に時間がかかる場合があります。
getPicture()で成功時に呼び出されるコールバック関数には、画像データがパラメータとして渡されます。この画像データはバイナリではなくてBASE64形式でエンコードされたものになっています。また、このデータにはMIMEタイプなどのヘッダーがないため、ページ内に表示するためにはdataスキームを使って"data:image/jpeg;base64,"と指定し以後にカメラから取り込まれた画像データを連結します。この連結したものをImageオブジェクトのsrcプロパティに入れると画面にカメラから取り込まれた画像が表示されます。

サンプルのプロジェクトファイルを [ダウンロード (download.zip)]

iPhone/iPad × HTML5アプリ制作 iPhone/iPad × HTML5アプリ制作。HTML5+CSS+JSで書かれたプログラムをXcode, PhoneGap, TitaniumでiPhoneアプリにしてしまおう、という解説本です。
【アマゾンで購入する】

サンプルコード (Sample code)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PhoneGap Sample</title>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
window.addEventListener("load", function(){
document.addEventListener("deviceready", function(){
// Main Program ------------------------
var myBtn = document.getElementById("btn");
myBtn.addEventListener("click", function(){
navigator.camera.getPicture(
function(data){
var imageData = "data:image/jpeg;base64,"+data;
document.getElementById("myPicture").src = imageData;
},
function(msg){
alert("Error : "+msg);
},{
quality: 60
});
}, true);
// -------------------------------------
}, true);
}, true);
</script>
</head>
<body>
<h1>Sample</h1>
<form>
<input type="button" value="カメラから取り込む" id="btn">
</form>
<img src="" width="300" height="450" id="myPicture">
</body>
</html>