0

phonegap（cordova）機能を利用して、非常にシンプルなアプリ内でユーザーのアルバムの写真を表示しようとしています。

これまでのところ、ユーザーはアルバムから写真を選択して表示することができます。

私が達成したいのは、ユーザーが最初の画像の下に自分のアルバムから別の画像を追加できるように、別のボタンを用意することです（最初の画像を置き換えるのではありません）。これを行う方法はありますか？[の

どんな助けもいただければ幸いです:)

これがデザインなどのないコードです。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
 var pictureSource; // picture source
 var destinationType; // sets the format of returned value 

 // Wait for Cordova to connect with the device
 document.addEventListener("deviceready",onDeviceReady,false);

 // Cordova is ready to be used!
 function onDeviceReady() {
   pictureSource=navigator.camera.PictureSourceType;
   destinationType=navigator.camera.DestinationType;
 }

 // Take picture using device camera and retrieve image as base64-encoded string
 function capturePhoto() {
   navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, allowEdit : true,
   destinationType: destinationType.DATA_URL });
 }

 // Called if something bad happens. 
 function onFail(message) {
   alert('Failed because: ' + message);
 }

 function onPhotoDataSuccess(imageData) {
   // Uncomment to view the base64 encoded image data
   // console.log(imageData);

   // 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 = "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);

   // 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 to retrieve photos from the album
 function getPhoto(source) {

   // Retrieve image file location from specified source
   navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
     destinationType: destinationType.FILE_URI,
     sourceType: source });
 }
</script>


<link href="css/jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div data-role="content"> 
  <button data-theme="d" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Browse     Photos</button> 
  <img style="display:none;width:100%;" id="largeImage" src="" /> <br>
</div>

</body>
4

1 に答える 1

0

JQuery Mobile CSSのみを含めたようですので、JQueryおよびJQueryMobileJSファイルを含める必要があります。

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

次に、onPhotoURISuccess（imageURI）関数を変更します。既存のimg要素のsrcを変更する代わりに、新しい画像を取得して新しいdivに追加するたびに動的に作成できます。

これを最初に行うために、htmlをに変更します。

<div data-role="content"> 
<button data-theme="d" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Browse          Photos</button> 
<div id="photos"></div>
</div>

次に、次のように関数を変更できます。

function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI 
// console.log(imageURI);

// Create new Image element
var img = $('<img />');
img.attr('src', imageURI);

// Append new img to our photos div
img.appendTo('#photos');

}
于 2013-03-12T05:50:28.113 に答える