フォトライブラリの写真を取り込む
お絵かきアプリの基本機能が無事に動作したので、PhoneGapならではの機能を追加します。PhoneGapにはiPhone/iPad内に保存されているフォトライブラリ（カメラロール）に保存されている画像データを読み込む機能があります。ボタンがタップされたらフォトライブラリから写真を選択できるようにしましょう。選択した写真はCanvasに描画されます。
ボタンを用意します。ボタンはクリックされたら（タップされたら）、cameraCapture関数を呼び出すようにします。
<button onclick="cameraCapture()">フォトライブラリを選択</button>
フォトライブラリへは、カメラで撮影する場合と同じ、PhoneGapのCamera APIを使ってアクセスできます。navigator.camera.getPicture()メソッドを使い、sourceTypeのオプションに「navigator.camera.PictureSourceType.PHOTOLIBRARY」を指定するとフォトライブラリから画像を選択できます。
navigator.camera.getPicture( cameraSuccess, cameraError, {
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
この後の処理はカメラでの撮影とまったく同じです。カメラからの画像取り込みに関しては過去の記事を参照してください。
- PhoneGapでiPhoneのカメラアプリを作ろう
- http://ascii.jp/elem/000/000/624/624794/
これでフォトライブラリの画像を選択する画面になり、選択した画像がCanvasに描画されるようになります。実際のプログラムは以下のようになります。
変更を加えたプログラム
なお、本来ならばPhoneGapのdevicereadyイベント発生後でなければカメラ機能は正しく使えませんが、ここでは起動後、ボタンがタップされるまでに十分な時間があるものとしてdevicereadyイベントの処理を省略しています。一般に配布するアプリを作成する場合は、devicereadyイベントを捕捉して処理を実行するようにしてください。
実機に転送して実行してみましょう。Canvasに何か描いてからボタンをタップすると、フォトライブラリが表示されます。カメラから撮影した写真も選択できますが、写真のサイズが大きいと変換に時間がかかり、iPhone 4では4～5秒近く待たされることがあります。しばらくするとCanvasに選択した写真が描画されます。
Canvasに何か描いてからボタンをタップする
Camera Roll（カメラで撮影した写真）かPhoto Library（フォトライブラリ）をタップ
描画したい写真をタップ
しばらくすると選択した画像がCanvasに描画される。画像上で指をなぞると赤い線で描ける
<!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() {
navigator.camera.getPicture( cameraSuccess, cameraError, {
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}
// データの取得に成功した場合
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()">フォトライブラリを選択</button>
<div id="stat"></div>
<script type="text/javascript" charset="utf-8" src="js/draw.js"></script>
</body>
</html>
