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 和 JQuery Mobile JS 文件。

<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) 函数。您可以在每次检索新图像并将其添加到新 div 时动态创建它，而不是更改现有 img 元素的 src。

为此，我们首先将您的 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 回答