説明
getPicture()で成功時に呼び出されるコールバック関数には、画像データがパラメータとして渡されます。この画像データはバイナリではなくてBASE64形式でエンコードされたものになっています。また、このデータにはMIMEタイプなどのヘッダーがないため、ページ内に表示するためにはdataスキームを使って"data:image/jpeg;base64,"と指定し以後にカメラから取り込まれた画像データを連結します。
Canvasでは直接画像データを描画する機能がないため、一度new Image()として画像オブジェクトを作成します。このオブジェクトのsrcプロパティにカメラから取り込まれたデータ（"data:image/jpeg;base64,"+取り込んだデータ）を入れます。画像を入れてもすぐにCanvasに描画することはできません。というのもdrawImage()でCanvasに描画しようとしても肝心の画像データが処理中であるため何も描画されません。これを回避するには完全にデータ処理が終わってから描画します。これは画像オブジェクトのイベント(onload)が発生したらdrawImage()を使ってCanvasに画像を描画するようにします。
drawImage()で描画する場合にはサイズの指定をしておくのがよいでしょう。というのもiPhoneやiPod touch、iPadの種類にもよりますが、カメラの画素数が多いと非常に大きなサイズの画像として描画されてしまうためです。
サンプルのプロジェクトファイルを [ダウンロード (download.zip)]
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;
var canvasEle = document.getElementById("myPicture");
var context = canvasEle.getContext("2d");
var imgObj = new Image();
imgObj.src = imageData;
imgObj.onload = function(){
context.drawImage(imgObj, 0, 0, 300, 450);
}
},
function(msg){
alert("Error : "+msg);
},{
quality: 60
});
}, true);
// -------------------------------------
}, true);
}, true);
</script>
</head>
<body>
<h1>Sample</h1>
<form>
<input type="button" value="カメラから取り込む" id="btn">
</form>
<canvas width="300" height="450" id="myPicture" style="border:1px solid red"></canvas>
</body>
</html>