説明
フォトライブラリから読み込む画像の画質はオプションのqualityで指定できます。値が大きいほど高画質になります。また、フォトライブラリの場合、画像データの場所をURIとして返すようにすることができます。URIとして返すようにするにはオプションでdestinationType: navigator.camera.DestinationType.FILE_URIを指定します。
getPicture()で成功時に呼び出されるコールバック関数には、オプション設定により異なります。オプションでnavigator.camera.DestinationType.FILE_URIを指定している場合は、画像のFile URIがパラメータとして渡されます。このURIを画像オブジェクトのsrcプロパティに設定すればページ上に画像が表示されます。
サンプルのプロジェクトファイルを [ダウンロード (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(imageURI){
document.getElementById("myPicture").src = imageURI;
},
function(msg){
alert("Error : "+msg);
},{
quality: 60,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}, 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>