back
カメラを使おう！ (2/2)
■撮影イメージを表示するアプリを作る
では、実際にカメラ撮影を利用する簡単なサンプルを作成してみましょう。ここではボタンを押すとカメラが起動し、撮影して、そのイメージを<img>に表示する簡単な処理を考えてみます。
先に作成したサンプルアプリのindex.htmlを下のリスト欄のように書き換えてください。そしてビルドし、動作を確認してみましょう。例によってjQuery Mobileを使っていますので、アプリからインターネットアクセスが可能な状態であることを確認しておいてください。
このアプリでは、テキストエリアの下にボタンが１つ、その更に下に（起動時には何も表示されない）イメージエリアが用意されています。ボタンをクリックすると、カメラが起動し、カメラの撮影が行えます。Androidで複数のカメラを入れてある場合には、このときどのカメラアプリを使うか尋ねてくるはずなので好きなものを選んで利用してください。
撮影が終了するとカメラは自動的に終了し、サンプルアプリのイメージエリアに撮影した写真のイメージが表示されます。また上のテキストエリアには、このイメージのアドレス（ファイルパス）が表示されます。
ここでは、以下のようにしてカメラ撮影を開始しています。
qulity――保存するJEPGイメージファイルのクオリティ（圧縮率）を指定します。０～100の間の整数で指定し、100ならば無圧縮（劣化なし）となります。
destinationType――既に説明しましたね。ここでは、Camera.DestinationType.FILE_URIと指定することで、イメージのアドレスを引数で渡すようにしています。
撮影成功時に呼び出される関数は、function onSuccess(imageURI)というように定義されています。これで、引数のimageURIにイメージファイルのアドレスが渡されます。ここでは、image.src = imageURI;というようにして<img>タグのsrcに設定して表示させています。イメージファイルのアドレスさえ得られれば、後はどうにでもできそうですね。
例えば、前回にやったローカルストレージなどでアドレスを保管し、ライブラリ化するなどの応用も考えられます。それぞれで利用の仕方を考えてみると面白いでしょう。
先に作成したサンプルアプリのindex.htmlを下のリスト欄のように書き換えてください。そしてビルドし、動作を確認してみましょう。例によってjQuery Mobileを使っていますので、アプリからインターネットアクセスが可能な状態であることを確認しておいてください。
このアプリでは、テキストエリアの下にボタンが１つ、その更に下に（起動時には何も表示されない）イメージエリアが用意されています。ボタンをクリックすると、カメラが起動し、カメラの撮影が行えます。Androidで複数のカメラを入れてある場合には、このときどのカメラアプリを使うか尋ねてくるはずなので好きなものを選んで利用してください。
撮影が終了するとカメラは自動的に終了し、サンプルアプリのイメージエリアに撮影した写真のイメージが表示されます。また上のテキストエリアには、このイメージのアドレス（ファイルパス）が表示されます。
ここでは、以下のようにしてカメラ撮影を開始しています。
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI }); 成功した場合にはoSuccessを、失敗した場合はonFailをそれぞれ呼び出します。またその後に以下の2つの項目を連想配列にまとめて指定してあります。qulity――保存するJEPGイメージファイルのクオリティ（圧縮率）を指定します。０～100の間の整数で指定し、100ならば無圧縮（劣化なし）となります。
destinationType――既に説明しましたね。ここでは、Camera.DestinationType.FILE_URIと指定することで、イメージのアドレスを引数で渡すようにしています。
撮影成功時に呼び出される関数は、function onSuccess(imageURI)というように定義されています。これで、引数のimageURIにイメージファイルのアドレスが渡されます。ここでは、image.src = imageURI;というようにして<img>タグのsrcに設定して表示させています。イメージファイルのアドレスさえ得られれば、後はどうにでもできそうですね。
例えば、前回にやったローカルストレージなどでアドレスを保管し、ライブラリ化するなどの応用も考えられます。それぞれで利用の仕方を考えてみると面白いでしょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※index.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function doAction(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
}
function onSuccess(imageURI) {
var image = document.getElementById('img1');
image.src = imageURI;
var msg = document.getElementById('msg');
msg.innerHTML = imageURI;
}
function onFail(message) {
alert('Failed: ' + message);
}
</script>
</head>
<body>
<!-- home page -->
<div id="home" data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<h2>Sample Page</h2>
<textarea id="msg"></textarea>
<button onclick="doAction();">take a picture!</button>
<hr />
<img id="img1" src="" width="300" height="300">
</div>
</div>
</body>
</html>
| << 前へ |