私は Phonegap と JqueryMobile の新しい学習者です。phonegap Camera API コードだけを使用して、Eclipse で別のプロジェクトを作成しました。エミュレータで正常に動作します。しかし、別のプロジェクトで同じコードを Jquery モバイルに統合すると、例外(Uncaught TypeError: Cannot read property 'PNG' of undefined at file:///android_asset/www/index.html:347) がスローされます。このカメラ API コードがなくても問題なく動作します。
(1) 作業コード - フォンギャップのみ
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var encodingType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
console.log("onDeviceReady");
pictureSource=navigator.camera.PictureSourceType;
console.log("onDeviceReady1");
destinationType=navigator.camera.DestinationType;
console.log("onDeviceReady2");
encodingType=navigator.camera.EncodingType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
console.log(imageData);
var re = /\?(\d*)$/;
imageData=imageData.replace(re, "");
alert("imageData is "+imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
console.log(imageURI);
// alert("uri is "+imageURI);
var re = /\?(\d*)$/;
imageURI=imageURI.replace(re, "");
alert("imageURI is "+imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1, encodingType:encodingType.PNG });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 100, allowEdit: true, targetWidth: -1, targetHeight: -1 ,encodingType:encodingType.PNG, });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1 ,
destinationType: destinationType.FILE_URI,encodingType:PNG,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="width:60px;height:60px;" id="smallImage" src="a.png" />
<img style="" id="largeImage" src="a.png" />
</body>
</html>
(2) コードが機能しない - jquerymobile + phonegap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="jquery.min.js">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
var encodingType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap is ready to be used!
//
function onDeviceReady() {
console.log("onDeviceReady");
pictureSource=navigator.camera.PictureSourceType;
console.log("onDeviceReady1");
destinationType=navigator.camera.DestinationType;
console.log("onDeviceReady2");
encodingType=navigator.camera.EncodingType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
console.log(imageData);
var re = /\?(\d*)$/;
imageData=imageData.replace(re, "");
alert("imageData is "+imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
console.log(imageURI);
// alert("uri is "+imageURI);
var re = /\?(\d*)$/;
imageURI=imageURI.replace(re, "");
alert("imageURI is "+imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1, encodingType:encodingType.PNG });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality:50, destinationType:Camera.DestinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 100, targetWidth: -1, targetHeight: -1 ,
destinationType: destinationType.FILE_URI,encodingType:PNG,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
<script src="jquery.mobile-1.1.1.min.js">
</script>
<script src="my.js">
</script>
<script src="local.js">
</script>
<script src="jqm.autoComplete.min-1.4.2.js">
</script>
<script src="camera.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<script>
var Countrydata='';
$("#page1").bind("pageshow", function(e) {
var myXML = ""
var availableTags = "";
var request = new XMLHttpRequest();
request.open("GET", "Countries.xml", true);
request.onreadystatechange = function(){
if (request.readyState == 4) {
if (request.status == 200 || request.status == 0) {
myXML = request.responseXML;
parseXml(myXML);
}
}
}
request.send();
function parseXml(xml) {
$(xml).find('Country').each(function(){
if(Countrydata !='')
{
Countrydata += ',';
}
Countrydata += $(this).text();
});
availableTags = Countrydata;
}
availableTags = ['India'];
$("#searchinput1").autocomplete({
target: $('#suggestions'),
source: availableTags,
minLength: 1,
matchFromStart: false,
callback: function(e) {
var $a = $(e.currentTarget); // access the selected item
$('#searchinput1').val($a.text()); // place the value of the selection into the search box
$("#searchinput1").autocomplete('clear'); // clear the listview
}
});
});
</script>
<div data-theme="b" data-role="header">
<h2>
Nalco Water Savings Unit
</h2>
</div>
<div data-role="content" style="padding: 15px" data-theme="b">
<div data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="#" data-icon="arrow-r" >
Customer Info
</a>
</li>
<li>
<a href="#page2" data-icon="arrow-r">
Additional Details
</a>
</li>
<li>
<a href="#page3" data-icon="info">
Summary
</a>
</li>
</ul>
</div>
<div data-role="collapsible-set" data-content-theme="b">
<div data-role="collapsible" data-collapsed="false">
<h3>
Company details
</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput3">
Company number
</label>
<input name="txtCompNumber" id="textinput3" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput4">
Company Address
</label>
<input name="txtCompAddr" id="textinput4" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput5">
City
</label>
<input name="txtCity" id="textinput5" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="searchinput1">
Country
</label>
<input id="searchinput1" placeholder="...Serach for country" type="text" />
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
Customer Name
</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
Customer Name
</label>
<input name="txtCustName" id="textinput1" placeholder="" value="" type="text" />
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
Sales Engineer Details
</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput6">
Sales Engineer Name
</label>
<input name="txtSalesEngName" id="textinput6" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput7">
Sales Engineer Phone No.
</label>
<input name="txtSalesEngPhone" id="textinput7" placeholder="" value="" type="tel" />
</fieldset>
</div>
</div>
</div>
<a data-role="button" data-inline="true" data-rel="back" data-transition="fade" href="#page2">
Proceed
</a>
</div>
</div>
<div data-role="page" id="page2" data-theme="b">
<div data-role="header">
<h2>
Nalco Water Savings Unit
</h2>
</div>
<div data-role="content" style="padding: 15px">
<div data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="#page1" data-icon="arrow-r" class="ui-btn-active ui-state-persist">
Customer Info
</a>
</li>
<li>
<a href="#" data-icon="arrow-r">
Additional Details
</a>
</li>
<li>
<a href="#page3" data-icon="info">
Summary
</a>
</li>
</ul>
</div>
<h2> <b> What additional installation costs have been identified? </b> </h2>
<fieldset data-role="controlgroup" data-mini="true" >
<div class="ui-grid-b" id="gridAddCost">
<div class="ui-block-a">
<h3><b>Description</b></h3>
</div>
<div class="ui-block-b" >
<h3><b>Cost</b></h3>
</div>
<div class="ui-block-c" >
</div>
<div class="ui-block-a">
<input name="txt1" id="textinput5" placeholder="" value="" type="text" />
</div>
<div class="ui-block-b">
<input name="txt2" id="textinput5" placeholder="" value="" type="text" />
</div>
<div class="ui-block-c" >
</div>
<div class="ui-block-a">
<input name="txt3" id="textinput5" placeholder="" value="" type="text" />
</div>
<div class="ui-block-b">
<input name="txt4" id="textinput5" placeholder="" value="" type="text" />
</div>
<div class="ui-block-c" >
</div>
<div class="ui-block-a">
<input name="txt5" id="textinput5" placeholder="" value="" type="text" />
</div>
<div class="ui-block-b">
<input name="txt6" id="textinput5" placeholder="" value="" type="text" />
</div>
<div class="ui-block-c" >
</div>
</div>
<input id="btnAddDesc" type="button" value="Add installation" />
</fieldset>
<a data-role="button" data-inline="true" data-rel="back" data-transition="fade" href="#page3">
Proceed
</a>
</div>
</div>
<div data-role="page" id="page3" data-theme="b">
<div data-role="header">
<h2>
Nalco Water Savings Unit
</h2>
</div>
<div data-role="content" style="padding: 15px">
<div data-role="content">
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="width:60px;height:60px;" id="smallImage" src="a.png" />
<img style="" id="largeImage" src="a.png" />
</div><!-- /content -->
<div data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="#page1" data-icon="arrow-r" class="ui-btn-active ui-state-persist">
Customer Info
</a>
</li>
<li>
<a href="#page2" data-icon="arrow-r">
Additional Details
</a>
</li>
<li>
<a href="#" data-icon="info">
Summary
</a>
</li>
</ul>
</div>
<a data-role="button" data-inline="true" data-rel="back" data-transition="fade" href="#page1">
Proceed
</a>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>